How to read the JSON file and extract the all the fields in javascript .If the data is stored in the following format

Question

{
  "name":"John",
  "age":31,
  "pets":[
      { "dog","cat","pug" }
   ]
  "cars":[
      { "bmw","Ferrari","fiat"   }
   ]
}

If not possible to store in this format.How do i store this kind of data in a .json file and access it?

Possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Teemu, Jan 13 '17 at 18:58
You can't, as it's not valid JSON nor JavaScript. Read [the documentation for array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). — Heretic Monkey, Jan 13 '17 at 19:00
@Pytth this is not a javascript. Its stored in .json file and i want to acees is using javascript — Anagh Hegde, Jan 13 '17 at 19:04
@Dalorzo Then how do i store this kind of data in a .json file — Anagh Hegde, Jan 13 '17 at 19:05
You'll have first to fix you data generation algorithm to create a valid JSON (that stands for JavaScript Object Notation) data. Then, to access the file, depends if it is stored in your server, local system, do you want to access it from the browser or from the server (node)? — mrlew, Jan 13 '17 at 19:10
@AnaghHegde remove `{}` from your arrays... Like: `"pets":[ "dog","cat","pug" ]`. It is the way to make this work — Dalorzo, Jan 13 '17 at 19:20
@Dalorzo how do i access all the fields and what do i have to if there some 1000 fields ? — Anagh Hegde, Jan 13 '17 at 19:38

score 0 · Answer 1 · answered Jan 13 '17 at 19:02

0

In your case, you should decode your Json, store it in a variable twith the following code : var data = JSON.parse(yourJson); and you can read it with data["name"] for example. Hope I helped you !

EDIT : I agree with the others, your JSON is not valid, but when your JSON is ok, my method should work

answered Jan 13 '17 at 19:02

BDeliers

74
1
12

Then how do i store this kind of data in a json file? – Anagh Hegde Jan 13 '17 at 19:08
You can't write or read any file with JavaScript because it's on the client side, so you have to use PHP. To open a file, it's `fopen()`, to read it it's `fgets()`, to write in it it's `fputs()` and finally you close it with `fclose()`. If you're obliged to use JS, read the file with PHP, then you display the data on a page that you read with an Ajax request in JavaScript – BDeliers Jan 13 '17 at 19:18

score 0 · Answer 2 · edited Jan 13 '17 at 22:28

If you have a file: data.json - containing valid json text:

{  
    "name": "John",  
    "age":  31,  
    "pets": ["dog","cat","pug"],  
    "cars": ["BMW","Ferrari","Nissan"],  
    "wife": {"name":"Jane","age":"27"},  
    "children":[{"name":"Jack","age":"10"},{"name":"Jill","age":"6"}]  
}

you will need a web server like mongoose to run the page in - to access the file on your hard drive and not get a cross origin error: https://www.cesanta.com/products/binary

using test.html file:

<html>
<body>
hello - key f12 in browser to view console output
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.getJSON('data.json', function(_jsonData)
{
    console.log(_jsonData); // output json to console - f12 in browser to view (I recommend Chrome)
    console.log(_jsonData.name); // output: John
    console.log(_jsonData.age);  // output: 31
    console.log(_jsonData.pets[1]);  // output: cat
    console.log(_jsonData.cars[3]);  // output: Nissan
    console.log(_jsonData.wife.name);  // output: Jane
    console.log(_jsonData.children[1].name);  // output: Jill
})
.done(function()
{
    console.log("success");
})
.fail(function(e)
{
    console.log("error: ", e);
})
.always(function() {
    console.log("complete");
});
</script>
</body>
</html>

or you can look at the fiddle which doesn't access a file but has the json defined in the js...

var jsonData = 
{
    "name": "John",
    "age":  31,
    "pets": ["dog","cat","pug"],
    "cars": ["BMW","Ferrari","Nissan"],
    "wife": {"name":"Jane","age":"27"},
    "children":[{"name":"Jack","age":"10"},{"name":"Jill","age":"6"}]
} 

$('#divOutput').html(
'json: ' +  JSON.stringify(jsonData)           + '<br><br>' +
'name: '                 + jsonData.name       + '<br>' + // output: John
'age: '                  + jsonData.age        + '<br>' + // output: 31
'2nd pet: '              + jsonData.pets[1]    + '<br>' + // output: cat
'3rd car: '              + jsonData.cars[2]    + '<br>' + // output: Nissan
"wife's name: "          + jsonData.wife.name  + '<br>' + // output: Jane
"second child's name: "  + jsonData.children[1].name);    // output: Jill

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divOutput"></div>

How to read the JSON file and extract the all the fields in javascript .If the data is stored in the following format

2 Answers2