Looping through nested JSON values using a "for" loop in JavaScript

Question

Looping through nested JSON values using a "for" loop in JavaScript

How can I iterate through a JSON file to retrieve the values of total and first_record? The specific key is:

json.STATION[0].OBSERVATIONS.precipitation[0].total

My goal is to display the result in the following format:

[20180116, 0.8], [20180117, 0.0] . . .

Despite trying different methods, I keep getting an output with undefined as the best result. Below is a snippet from my work on JSFiddle where the JSON data is generated using the Mesowest.net API.

Once I resolve this issue, I intend to plot these values using Highcharts. Thank you for your help.

const data = {
  "UNITS": {
    "precipitation": "Inches"
  },
  "STATION": [{
    "STATUS": "ACTIVE",
    "MNET_ID": "25",
    "PERIOD_OF_RECORD": {
      "start": "20000120",
      "end": "20180121"
    },
    "ELEVATION": "6340",
    "NAME": "BOGUS BASIN",
    "RESTRICTED": false,
    "STID": "BOGI1",
    "ELEV_DEM": "6362",
    "LONGITUDE": "-116.09685",
    "STATE": "ID",
    "OBSERVATIONS": {
      "precipitation": [{
        "count": 23,
        "first_report": "20180115",
        "interval": 1,
        "report_type": "precip_accum",
        "last_report": "20180115",
        "total": 0.0
      }, {
        "count": 24,
        "first_report": "20180116",
        "interval": 2,
        "report_type": "precip_accum",
        "last_report": "20180116",
        "total": 0.2
      }, {
        "count": 24,
        "first_report": "20180117",
        "interval": 3,
        "report_type": "precip_accum",
        "last_report": "20180117",
        "total": 0.0
      }, {
        "count": 24,
        "first_report": "20180118",
        "interval": 4,
        "report_type": "precip_accum",
        "last_report": "20180118",
        "total": 0.0
      }, {
        "count": 24,
        "first_report": "20180119",
        "interval": 5,
        "report_type": "precip_accum",
        "last_report": "20180119",
        "total": 0.8
      }, {
        "count": 24,...

<p id="demo"></p>

javascript json for-loop highcharts

Answer 1

Answer №1

At the start, within your for loop, you are referencing

data.STATION[0].OBSERVATIONS.precipitation.total.length

, but the total component is not actually defined there. It should be precipitation[0].total in order for it to hold any value. Even then, it's not an array. You simply need:

data.STATION[0].OBSERVATIONS.precipitation.length

In terms of coding style, consider storing that information in a variable to avoid repetition and potential errors:

const records = data.STATION[0].OBSERVATIONS.precipitation;

Additionally, instead of repeatedly assigning the same value to a variable, which will only retain the last value at the end, you should store them in an array.

const totals = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
}

If you require both total and first_report, you can either use parallel arrays:

const totals = [];
const firsts = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
  firsts.push(records[i].first_record);
}

or create an array of arrays:

const results = [];
for (let i = 0; i < records.length; i++) {
  results.push([records[i].total, records[i].first_record]);
}

Check out this functional example:

const data = {
   // Sample JSON data object here
};

const records = data.STATION[0].OBSERVATIONS.precipitation;

const results = [];

for (let i = 0; i < records.length; i++) {
    results.push([records[i].total, records[i].first_report]);
}

console.log(results);

Answer 2

At the start, within your for loop, you are referencing

data.STATION[0].OBSERVATIONS.precipitation.total.length

, but the total component is not actually defined there. It should be precipitation[0].total in order for it to hold any value. Even then, it's not an array. You simply need:

data.STATION[0].OBSERVATIONS.precipitation.length

In terms of coding style, consider storing that information in a variable to avoid repetition and potential errors:

const records = data.STATION[0].OBSERVATIONS.precipitation;

Additionally, instead of repeatedly assigning the same value to a variable, which will only retain the last value at the end, you should store them in an array.

const totals = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
}

If you require both total and first_report, you can either use parallel arrays:

const totals = [];
const firsts = [];
for (let i = 0; i < records.length; i++) {
  totals.push(records[i].total);
  firsts.push(records[i].first_record);
}

or create an array of arrays:

const results = [];
for (let i = 0; i < records.length; i++) {
  results.push([records[i].total, records[i].first_record]);
}

Check out this functional example:

const data = {
   // Sample JSON data object here
};

const records = data.STATION[0].OBSERVATIONS.precipitation;

const results = [];

for (let i = 0; i < records.length; i++) {
    results.push([records[i].total, records[i].first_report]);
}

console.log(results);

Answer 3

Answer №2

Just a heads up, your key isn't precipitation[0], instead you need to loop through all precipitation elements:

// Since precipitation is an array, it can be mapped using Array.prototype.map()

var result = data.STATION[0].OBSERVATIONS.precipitation.map(function(p) {
    return [p.first_report, p.total] });

for more information check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 4

Just a heads up, your key isn't precipitation[0], instead you need to loop through all precipitation elements:

// Since precipitation is an array, it can be mapped using Array.prototype.map()

var result = data.STATION[0].OBSERVATIONS.precipitation.map(function(p) {
    return [p.first_report, p.total] });

for more information check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Looping through nested JSON values using a "for" loop in JavaScript

Answer №1

Answer №2

Similar questions

Establishing the highest allowable value limit in cleave

Troubleshooting Event.target Problem in Firefox 6

Issue with IntelliJ: TypeScript Reference Paths Are Not Relative

Create a JavaScript object containing placeholders and another JavaScript object that holds the substitutions to be used

Having Difficulty Applying a Background Color to a Class in Bulk

How can I use jQuery to check a checkbox without triggering its bound event?

Troubleshooting Tips: Investigating a Service Call in AngularJS 2 using ES6 Syntax

The integration of Google Translate with Javascript on HtmlEditorExtender is experiencing difficulties and is not functioning properly

Retrieve only the initial tag content using jquery

Display or conceal form elements depending on the JSON response

In a carousel slider, the height and width of divs are not set to specific dimensions

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

What causes AsyncStorage to lose one value while another value remains intact?

Using PHP to interact with JSON APIs

Is there a way to update protractor.conf.js configurations using the command line?

Tips for utilizing the jQuery selectbox plugin on multiple elements within a single page

Parse JSON data and save information into PHP arrays

Clearing Time Field Input in Safari

What can be used in place of Subject.prototype.hasObservers?

The ng-click functionality is not functioning as expected within the directive