Read and calculate data with JS from JSON file

Question

how can I read specific data from a JSON file and use that data again in Javascript.

Example: I have a .JSON file that has thousands of records of planets outside our solar system. There's a column in JSON (well, in CVS at least when I converted it to JSON) that has all that information about all of these planets calculated in distance in parsec.

I want to be able to calculate what the average is of all of these planets and alert this number through simple javascript.

This is how these planets are listed in JSON:

"Distance [pc]": 110.62,
   "Effective Temperature [K]": 4742,
   "Date of Last Update": "5/14/2014"

I am very new to JSON so this might be an easy enough answer for JSON experts to answer. Hope you can help, thanks!

PS: I added the JSON file thinking it would help you in understanding and answering the question. Here's a temporary URL to it I uploaded.

EDIT:

Here's more of a chunk of the JSON code

[
 {
   "rowid": 1,
   "Host name": "11 Com",
   "Number of Planets in System": 1,
   "Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
   "Planet Radius [Jupiter radii]": null,
   "Planet Density [g": {
      "cm**3]": null
   },
   "Distance [pc]": 110.62,
   "Effective Temperature [K]": 4742,
   "Date of Last Update": "5/14/2014"
},
 {
   "rowid": 2,
   "Host name": "11 UMi",
   "Number of Planets in System": 1,
   "Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
   "Planet Radius [Jupiter radii]": null,
   "Planet Density [g": {
      "cm**3]": null
   },
   "Distance [pc]": 119.47,
   "Effective Temperature [K]": 4340,
   "Date of Last Update": "5/14/2014"
},
 {
   "rowid": 3,
   "Host name": "14 And",
   "Number of Planets in System": 1,
   "Planet Mass or M*sin(i)[Jupiter mass]": 4.8,
   "Planet Radius [Jupiter radii]": null,
   "Planet Density [g": {
      "cm**3]": null
   },
   "Distance [pc]": 76.39,
   "Effective Temperature [K]": 4813,
   "Date of Last Update": "5/14/2014"
},
 {
   "rowid": 4,
   "Host name": "14 Her",
   "Number of Planets in System": 1,
   "Planet Mass or M*sin(i)[Jupiter mass]": 4.64,
   "Planet Radius [Jupiter radii]": null,
   "Planet Density [g": {
      "cm**3]": null
   },
   "Distance [pc]": 18.15,
   "Effective Temperature [K]": 5311,
   "Date of Last Update": "5/14/2014"
}]
enter code here

Please post your JavaScript code and a part of the JSON data. — Nhan
– Nhan, Commented Aug 30, 2016 at 13:00

Robert · Accepted Answer · 2016-08-30 13:37:13Z

1

If your JSON is string format, you can do something like this

var jsonObjects = JSON.parse("yourJsonString");
var distanceSum = 0;
for(var i=0; i<jsonObjects.length;i++){
      var distance = jsonObjects[i]["Distance [pc]"];
       distanceSum = distanceSum + distance;
    //do something with distance

}
alert("Average distance " + (distanceSum / jsonObjects.length));

EDIT: If json is located on some endpoint, you can use jQuery library.

$.get('url/jsonFile.json', function(jsonObjects){
var distanceSum = 0;
    for(var i=0; i<jsonObjects.length;i++){
          var distance = jsonObjects[i]["Distance [pc]"];
           distanceSum = distanceSum + distance;
    }
    alert("Average distance " + (distanceSum / jsonObjects.length));
});

EDIT 2:

Assuming your file structure is following:

index.html
jsonFile.json

you should use following snippet

Index.html

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<script>
$.get('jsonFile.json', function(jsonObjects){
var distanceSum = 0;
    for(var i=0; i<jsonObjects.length;i++){
          var distance = jsonObjects[i]["Distance [pc]"];
           distanceSum = distanceSum + distance;
    }
    alert("Average distance " + (distanceSum / jsonObjects.length));
});
</script>
</body>
</html>

edited Aug 30, 2016 at 13:37

answered Aug 30, 2016 at 13:06

Robert

3,5734 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ZoEM Over a year ago

This is sort of what I want, yeah. But the .json file is local and in the same folder as the html and javascript pages. How would it need to look because I'm having trouble simply changing that url to the directory of the file.

Robert Over a year ago

@Zhyohzy are you trying your code via filesystem or you are using some kind of local server? Note that you will not be read file directly from your drive from javascript. It's different if you just doubleclick on index.html on your drive, or visit it from localhost:8080/index.html

ZoEM Over a year ago

Yeah, I'm working on it through a local server. The file on filedropped I linked in the question was just to give you guys some reference to the contents of the file. It's quite big. I could also just place the entire data in the same javascript file but then it'd all have to be an array and programmed somewhat differently to what you did.

Robert Over a year ago

if your file is in the same folder as your html file, add a script reference to jQuery in your html, and use my second example (just change url to 'filename.json'). It should work. If your file is extremely large, maybe you should use back-end processing.

ZoEM Over a year ago

Works like a charm. Thank you!

|

Anoop LL · Accepted Answer · 2016-08-30 13:09:41Z

Hope this will help you..

var data =  [{
"rowid": 1,
"Host name": "11 Com",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 19.4,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
    "cm**3]": null
},
"Distance [pc]": 110.62,
"Effective Temperature [K]": 4742,
"Date of Last Update": "5/14/2014"
}, {
"rowid": 2,
"Host name": "11 UMi",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": 10.5,
"Planet Radius [Jupiter radii]": null,
"Planet Density [g": {
    "cm**3]": null
},
"Distance [pc]": 119.47,
"Effective Temperature [K]": 4340,
"Date of Last Update": "5/14/2014"
}]

Now data is an array of objects, to get the first object you need to give data[0] and for second you need to give data[1] and so on. to get the distance from first object you can simply call data[0]["Distance [pc]"], You can simply calculate it using a for loop based on the length of the data

Collectives™ on Stack Overflow

Read and calculate data with JS from JSON file

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related