Parsing JSON Data From a .JSON File in JavaScript

Question

Pretty new to JavaScript, JSON, and web development in general. But I'm trying to parse a large amount of frame data from a game in JSON. I had the information in a JSON file but I can't find a way to import the data to have it usable in my JavaScript file.

Instead I have it being parsed from JSON text inside of my JavaScript file. I don't like this because I can't put line breaks in my IDE (VSCode) without it erroring the JSON text. It has to be a whole straight line and there's a lot of data.

It just doesn't look clean and I'd rather be able to do it with normal JSON formatting from the file. I'll include some examples so you guys can see what I mean:

const nameJson = '{"Name": "name", "Jab1": 2, "Jab1_OS": -14, "Jab2": 2, "Jab2_OS": -16, "Jab3": 3, "Jab3_OS": -29, "Ftilt": 5, "Ftilt_OS": -13, "Uptilt": 5, "Uptilt_OS": -18, "Dtilt": 5, "Dtilt_OS": -15, "Fair": 16,"Fair_OS": -12,"UpB": 3,"UpB_OS": -20,"Bair": 6,"Bair_OS": -2,"Dair": 5,"Dair_OS": -11,"Upair": 4,"Upair_OS": -3}'
const name= JSON.parse(nameJson);

What I would like it to look like is:

[
    {
      "Name": "Name1",
      "Fair": 16,
      "Fair_OS": -12,
      "UPB": 3,
      "UPB_OS": "-99"
    },
    {
      "Name": "Name2",
      "Fair": 14,
      "FairOS": -7,
      "UPB": 14,
      "UPB_OS": "-99"
    }
  ]

Even if there's a way to make it formatted that way in the .js file I'm working in I'd like that answer too.

Thanks!

I would go with a solution that puts it into a different .json file and then fetches it. However, if you remove the `'` from the json string it is a valid javascript object and you could add as many line breaks as you want. If you want to keep it a string you could [use multiline strings](https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) too — A_A, Sep 03 '21 at 06:30

Devendra Kumbhkar · Answer 1 · 2021-09-03T07:20:57.713

2

You can use fetch API to load your data from external JSON file to javascript

fetch("FILENAME.json")
  .then(res => res.json())
  .then(json => console.log(json));

OR

fetch("FILENAME.json")
      .then(res => res.json())
      .then(json => {
          // Do whatever you want
          console.log(json)
          return json;
      });

Please note that fetch API doesn't work on the local file system. Once the File is available on your server(via serving application locally or deploying to to somewhere), this code will work perfectly.

edited Sep 03 '21 at 07:20

answered Sep 03 '21 at 05:12

Devendra Kumbhkar

267
3
5

So in regards to this. How would I get the data from the variable "json"? – Skyler Sep 03 '21 at 06:31
With `json.Name`, `json.Jab1`, etc. But you have to be aware that the fetching runs *asynchronously*. If this is a new concept to you, you should read up on this a little bit – A_A Sep 03 '21 at 06:33
Nothing shows up in my console whenever I try to log ```console.log(json.Name)``` I'm definitely going to read up on this too but I'm not quite sure why I'm not able to see any data when logging it. – Skyler Sep 03 '21 at 06:36

Gilang Pratama · Answer 2 · 2021-09-03T05:28:23.427

You have to loop with for in. You can try this code below.

Actually it is too hard to build an output like your expected output, because your data and your expected output is difference.

const nameJson = '{"Name": "name", "Jab1": 2, "Jab1_OS": -14, "Jab2": 2, "Jab2_OS": -16, "Jab3": 3, "Jab3_OS": -29, "Ftilt": 5, "Ftilt_OS": -13, "Uptilt": 5, "Uptilt_OS": -18, "Dtilt": 5, "Dtilt_OS": -15, "Fair": 16,"Fair_OS": -12,"UpB": 3,"UpB_OS": -20,"Bair": 6,"Bair_OS": -2,"Dair": 5,"Dair_OS": -11,"Upair": 4,"Upair_OS": -3}'
  const data = JSON.parse(nameJson);
  let name = []
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      let toPush = {}
      toPush[key] = data[key]
      name.push(toPush);
    }
  }
  console.log(name)

score -1 · Answer 3 · answered Sep 03 '21 at 05:13

-1

Use const name = $.parseJSON(nameJson);

answered Sep 03 '21 at 05:13

Muhammad Umair

21
2

jQuery is not in-use here, and certainly we haven't needed jQuery to parse JSON in many years. – Brad Sep 03 '21 at 05:18
Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 03 '21 at 05:43

Parsing JSON Data From a .JSON File in JavaScript

3 Answers3