Vanilla Javascript, how to read local JSON file

Question

I am new to javascript and I am trying to read a JSON file using javascript, but I do not know how to access data from the promise result. I have my data in a .json file call Data.json and I am using fetch inside in a promise to load the JSON file and return the result. How can I get the data from the promise result?

Data in JSON file

{
 "data": {
   "reviewer": [
  {
    "id": 1,
    "name": "susan smith",
    "job": "web developer",
    "text": "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry"
  },
  {
    "id": 2,
    "name": "anna johnson",
    "job": "web designer",
    "text": "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal."
  },
  {
    "id": 3,
    "name": "peter jones",
    "job": "intern",
    "text": "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag."
  },
  {
    "id": 4,
    "name": "bill anderson",
    "job": "the boss",
    "text": "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. "
  }
]
}}

JavaScript Code

const data = new Promise((resolve, reject) => {
fetch('./Data.json')
    .then(respond => {
        resolve(respond.json())
    }).catch(err => {
        reject(err)
 })
})

console.log(data)

When I run the code, I got this in the console.

Don't [create a new promise](https://runnable.com/blog/common-promise-anti-patterns-and-how-to-avoid-them) just to wrap `fetch`. `fetch` *already returns a promise*. — Quentin, Aug 24 '20 at 17:10

Yousaf · Accepted Answer · 2023-01-11T07:58:02.930

30

fetch() returns a Promise, so you don't need to create one yourself. Promise returned by fetch fulfills with a Response object on which you need to call .json() method to get the actual data. This method also returns a Promise, so you need to chain another then() method call.

fetch('./Data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

For details, see:

Using Fetch

edited Jan 11 '23 at 07:58

answered Aug 24 '20 at 17:04

Yousaf

27,861
6
44
69

This should be " .catch(err => console.log(err));" not console.log(error). Other than that works great. – Molly J Jul 26 '21 at 07:17
@MollyJ thanks for pointing out the typo. I had to look at the code more than once to detect the problem. – Yousaf Jul 26 '21 at 07:29
i did the same but it does not log into console can i have the data set into a var? – Ali Samie Feb 12 '23 at 06:56
Question: does fetch work directly on **Local files** (no server involved) or a **server** is needed to interact with? – willy wonka Jul 10 '23 at 15:02
@willywonka JavaScript in the browser can't read the file system. The `fetch` function can request the server for the file. The server can be local or remote. – Yousaf Jul 10 '23 at 18:38

Vanilla Javascript, how to read local JSON file

1 Answers1