Trouble with Fetch API and JSON

203
January 07, 2018, at 1:47 PM

I'm having some trouble correctly interacting with me json file. I'm using the fetch API to get my json file but when logging the response to the console, no data is actually returned. Instead I just get some sort of header response.

"use strict"; 
 
fetch('https://www.jasonbase.com/things/wAe3.json') 
.then((data) => { 
   console.log(data);  
}) 
.catch((err) => { 
    if(err) console.log(err); 
});

Ideally, I would be able to retrieve each property from the following json file :

{ 
  "completed-works": { 
    "example1": { 
      "title": "Example A", 
      "date": "1-6-18", 
      "time": "8 : 23 PM", 
      "preview": "Liquorice lollipop sugar plum pie dragée chocolate. Cotton candy jelly-o pie. Bear claw chocolate cake liquorice. Chocolate brownie lemon drops. Biscuit cupcake croissant lollipop. Tootsie roll lollipop cupcake bonbon. Sesame snaps tart toffee tart. Donut marshmallow danish cake chocolate cake jelly-o sweet. Apple pie cake pudding oat cake caramels chocolate cake chocolate cake caramels wafer.", 
      "body": "Liquorice lollipop sugar plum pie dragée chocolate. Cotton candy jelly-o pie. Bear claw chocolate cake liquorice. Chocolate brownie lemon drops. Biscuit cupcake croissant lollipop. Tootsie roll lollipop cupcake bonbon. Sesame snaps tart toffee tart. Donut marshmallow danish cake chocolate cake jelly-o sweet. Apple pie cake pudding oat cake caramels chocolate cake chocolate cake caramels wafer. Cheesecake brownie pudding macaroon chocolate bar chocolate cake oat cake. Jujubes lemon drops candy canes halvah chupa chups dragée candy canes biscuit. Ice cream tiramisu jelly chocolate bar halvah sugar plum chocolate cheesecake chupa chups. Croissant ice cream chocolate cake jelly donut marzipan biscuit. Chupa chups topping jujubes dessert topping lollipop danish bear claw lemon drops. Candy tart icing sesame snaps jujubes soufflé gingerbread. Gummi bears bonbon marzipan jelly fruitcake sweet roll pudding. Tiramisu icing carrot cake cake cake macaroon gummi bears tootsie roll donut. Fruitcake cotton candy tootsie roll cheesecake muffin bonbon gingerbread. Lollipop chocolate bar marshmallow sugar plum caramels lemon drops donut. Candy canes ice cream chocolate cookie icing gummies croissant jelly beans sweet. Cookie bonbon sweet. Pie pie fruitcake danish gummies. Jelly halvah brownie lollipop tootsie roll. Chupa chups fruitcake sesame snaps sweet powder donut candy canes cotton candy. Pudding apple pie tart. Bear claw jujubes croissant liquorice lollipop tart sugar plum wafer candy canes. Pudding donut cupcake jelly beans bear claw Candy canes cupcake bonbon biscuit. Icing jelly cake jelly-o sweet roll tootsie roll cookie gummi bears jelly beans. Gummi bears chocolate bar cheesecake cotton candy chocolate bar chocolate cookie tiramisu. Sweet roll cheesecake macaroon powder apple pie gummi bears. Lollipop sweet roll dessert. Powder marzipan sweet roll tart sesame snaps sweet roll caramels chocolate cake. Carrot cake chocolate bar jujubes toffee powder bear claw. Pastry tart tiramisu dragée pudding. Pie gummi bears lemon drops. Tiramisu powder chupa chups cake gummi bears. Sweet ice cream sugar plum. Lemon drops brownie candy canes. Carrot cake sweet roll pie. Marzipan carrot cake cotton candy soufflé. Brownie candy jelly beans ice cream carrot cake marzipan. Gummies lemon drops halvah pie muffin jelly beans muffin pie danish. Muffin sweet marshmallow chupa chups cheesecake. Topping chocolate gingerbread jujubes. Cake macaroon cotton candy candy dessert dragée apple pie toffee oat cake. Gingerbread powder caramels gummies cheesecake pastry cheesecake cookie bonbon. Lemon drops tart bonbon dessert cheesecake carrot cake candy canes. Bonbon jujubes cotton candy cookie pudding danish. Marzipan ice cream pie wafer cake. Toffee bear claw chocolate cake oat cake. Chupa chups sesame snaps caramels cheesecake. Cotton candy tart sweet roll tiramisu jelly soufflé bear claw donut cake." 
    } 
  } 
}

Thanks in advance.

Answer 1

You must get the json like that :

"use strict";
fetch('https://www.jasonbase.com/things/wAe3.json')
.then((response) => {
   return response.json()
})
.then((data) => {
   console.log(data); 
})
.catch((err) => {
    if(err) console.log(err);
});
Answer 2

After you fetch the URL, need to do .then(response => response.json()), in this way you can access to the properties: title, id or time

Good Luck

Rent Charter Buses Company
READ ALSO
Watcher does not catch array value changes

Watcher does not catch array value changes

I have a simple array structured like the following:

216
Empty rows when creating pdf using jsPDF and jsPDF autotable

Empty rows when creating pdf using jsPDF and jsPDF autotable

I am creating a pdf file using jsPDF and jsPDF autotable but the created pdf file is emptyThere are no errors, I have checked the rows if empty but they are not

302
Using AJAX to Access Files on my Server Leads to 404

Using AJAX to Access Files on my Server Leads to 404

I'm developing a website, and I'm trying to load images on the client side using AJAXI know the relative path of the image on my server (relative to the file with the AJAX code)

246
THREE.Points, parsing JSON, and iterating over materials

THREE.Points, parsing JSON, and iterating over materials

So I have some lovely JSON exported from Blender using threejs' addon

282