How to parse information from a JSON file?

[rittubhansali]

I want to parse the list of google fonts from a json file which contains a list of many names. I want the output in a javascript array. How can that be done?

[Dormilich]

JSON.parse() - JavaScript | MDN

[ssraj]

I use JSON to exchange the information with the database and fetch it. While fetching the information from the database, the data is in the form of String, parse it with the JSON.parse() method and it will become the javascript object. Here is the code.

var v = JSON.parse('{ "name": "A" , "age": "24"
}');
document.getElementById("pera").innerHTML = v.name + v.age;

Here, pera will be the ID of an HTML’s P tag.

[chrisofarabia]

I don’t know whether you got the answers to your question here, but if not, it would be useful if you could let us have the following info so we can help you better

1. What is the structure of the JSON you have - a small sample would be good here
2. An idea of how you want this information presented in an array?

[rittubhansali]

I have a list of sample names in a json file named names.json. I want to know how to parse all the names from the json file in a javascript array.

[MartinMuzatko]

Hey there @rittubhansali!
Where do you want to parse that file? On the front-end or purely back-end side? Do you use a module-bundler?

There are two cases I want to document, where you can choose from what suits best the situation. With the second option being my best bet to solve your case.

You have a dynamic json file, populated by some server and need to use it.

Your browser can’t directly access a file on your system, but your back-end can. For this, I need to know what existing architecture you are building upon. My best guess is, that you are using PHP or nodejs back-end-side.

PHP

$json = file_get_contents("names.json");
echo $json;

Source: https://stackoverflow.com/questions/4343596/parsing-json-file-with-php
NodeJS

var fs = require('fs');
 
var contents = fs.readFileSync('names.json');
console.log(contents);

Source: https://code-maven.com/reading-a-file-with-nodejs

I think the biggest problem you will encounter here, is how to get that data and work with that on the front-end. You could either create a REST API endpoint and retrieve the data via AJAX. (If you have no idea about what I am talking about, have a look at the API glossary)

This is the way to securely get data from the server to the client. Building a REST API is a lot of work. Alternatively, if you just want to get going, you could use the second option.

You have a static names.json (created just once) sitting in your front-end project folder and you want to use it.

If you don’t use any module bundler (so you can’t easily just do var names = require('names.json')) you could add window.names = in front of the long list of arrays of objects in the names.json file, and include it as <script> and be done with it. (however, this requires that the json file is a js file, which you can just rename) However, polluting the global namespace is frowned upon.

If you are using a module bundler, such as webpack, you can use require statements to let the module bundler know which files you need, before they get bundled. This means, that the json file will be used together with your code.

Which option should you go for?

There are other options. Where did you get that names.json from in the first place? Aren’t you supposed to use the google font api to fetch the required data?

There are existing open source projects making use of google fonts. Either displaying them in their own organized way or re-using the data to display statistics, etc. One great example is http://katydecorah.com/font-library/ (Which is open source, and which you can look into how they have done it)

Please let me know if that answers your question.

Best,
Martin