Using a for loop to iterate through a JSON object in JavaScript

Question

Using a for loop to iterate through a JSON object in JavaScript

As a beginner in JS, I am attempting to iterate through the given JSON data:

myLogger - myLogger - JSON ARRAY - {"dummmysetsJSONArr":[{"entryID":"1","distance":"100","calories":"50"},{"entryID":"2","distance":"200","calories":"100"},{"entryID":"3","distance":"300","calories":"150"},{"entryID":"4","distance":"400","calories":"200"},{"entryID":"5","distance":"500","calories":"250"},{"entryID":"6","distance":"600","calories":"300"}],"success":1}

However, the output on my console is not as expected and shows:

myLogger - undefined - undefined - undefined

I have tried various solutions found at this source but none of them seem to work for me.

This is how I have attempted using a for loop:

    for (var key in jsonarry) {
      if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
      }
    }

    /*
    for (var key in jsonarry) {
      if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[0].entryID + " - " + jsonarry[1].distance + " - " + jsonarry[2].calories);
      }
    }
    */

Below is my complete JavaScript code:

    google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

  var req = false;
  var jsonarry;

  try {
      // most browsers
      req = new XMLHttpRequest();

      myLogger("myLogger - XMLHttpRequest() created");
  } catch (e){
      // IE
      try{
          req = new ActiveXObject("Msxml2.XMLHTTP");

          myLogger("myLogger - req = new ActiveXObject(Msxml2.XMLHTTP);");          
      } catch (e) {
          // try an older version
          try{
              req = new ActiveXObject("Microsoft.XMLHTTP");

              myLogger("myLogger - req = new ActiveXObject(Microsoft.XMLHTTP);");               
          } catch (e){

          }
      }
  }

  if (!req) { 
    myLogger("req === false");
  } else {

    myLogger("req === true");
  }

  // Use onreadystatechange property
  req.onreadystatechange = function() {

       //myLogger("myLogger - req.onreadystatechange = function(){");

      if(req.readyState == 4) {

          myLogger("myLogger - req.readyState == 4");

          if(req.status === 200) {

            myLogger("myLogger - req.status === 200");

            jsonarry = req.responseText;

            myLogger("myLogger - JSON ARRAY - " + jsonarry);

            myLogger(" ------------- ");

            var obj = JSON.parse(jsonarry);

            myLogger("jsonarry.length == " + jsonarry.length);

            for (var key in jsonarry) {
              if (jsonarry.hasOwnProperty(key)) {
                myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
              }
            }

            /*
            for (var key in jsonarry) {
              if (jsonarry.hasOwnProperty(key)) {
                myLogger(jsonarry[0].entryID + " - " + jsonarry[1].distance + " - " + jsonarry[2].calories);
              }
            }
            */
          } else {
            myLogger("myLogger - req.status == " + req.status);
          }

          //return req.status === 200 ? success(req.responseText) : error(req.status)
      } else {
          myLogger("myLogger - req.readyState != 4 i.e. req.readyState === " + req.readyState);
      }
  }

  req.open("GET", 'http://www.dummyurl/dbread.php', true);

  req.send(null); 
}

function myLogger(content) {
    if (window.console && window.console.log) {
        console.log("myLogger - " + content);
    }
}

javascript json

Answer 1

Answer №1

When parsing the JSON string, ensure that you loop through the parsed value instead of looping through the JSON string itself.

var obj = JSON.parse(jsonarry);

myLogger("jsonarry.length == " + jsonarry.length);

for (var key in jsonarry) {
    if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
    }
}

Make sure to structure your code like this:

var obj = JSON.parse(jsonarry);

myLogger("jsonarry.length == " + jsonarry.length);

for (var key in obj) {
    if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
    }
}

Remember, it's important to iterate through the array inside the object rather than directly looping through the object itself.

Answer 2

When parsing the JSON string, ensure that you loop through the parsed value instead of looping through the JSON string itself.

var obj = JSON.parse(jsonarry);

myLogger("jsonarry.length == " + jsonarry.length);

for (var key in jsonarry) {
    if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
    }
}

Make sure to structure your code like this:

var obj = JSON.parse(jsonarry);

myLogger("jsonarry.length == " + jsonarry.length);

for (var key in obj) {
    if (jsonarry.hasOwnProperty(key)) {
        myLogger(jsonarry[key].entryID + " - " + jsonarry[key].distance + " - " + jsonarry[key].calories);
    }
}

Remember, it's important to iterate through the array inside the object rather than directly looping through the object itself.

Answer 3

Answer №2

When working with the parsed JSON result assigned to obj, remember to avoid using the raw JSON text from jsonarry

It's important to note that "dummmysetsJSONArr" is actually an array of objects.

Here's a suggested approach:

for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
           var list=obj[key];
           list.forEach(function(item){
               myLogger(item.entryID + " - " + item.distance + " - " + item.calories);
           });
      }
 }

Additionally, it's best to refrain from altering variable names like jsonarry as it could lead to confusion down the line.

Answer 4

When working with the parsed JSON result assigned to obj, remember to avoid using the raw JSON text from jsonarry

It's important to note that "dummmysetsJSONArr" is actually an array of objects.

Here's a suggested approach:

for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
           var list=obj[key];
           list.forEach(function(item){
               myLogger(item.entryID + " - " + item.distance + " - " + item.calories);
           });
      }
 }

Additionally, it's best to refrain from altering variable names like jsonarry as it could lead to confusion down the line.

Using a for loop to iterate through a JSON object in JavaScript

Answer №1

Answer №2

Similar questions

Retrieve all references to child elements in React

Can you explain the difference between CDN and ESM builds in vue.js?

Testing actual HTTP requests in unit and integration tests with AngularJS

What methods can I use to transfer data from one domain to another domain utilizing Ajax JSONP?

Building a Timekeeping Tool with Javascript

Deactivate JQuery star rating plugin after user has voted

The website content is not visible on Internet Explorer version 10

Automatically generated error notifications for Express-Validator

Parsing JSON data using ntlm security in PHP

Filtering an array of objects in React based on user input

Navigating JSON data within JavaScript utilizing a for loop

The first parameter needs to be either a string, a buffer instance, or a uint8array. Null received

Unable to retrieve file path from image selection in JavaScript by clicking on a button

Is there a feature similar to Nuxt.js' auto-register in Next.js?

Tips for determining the minimum value within an array of objects across multiple keys using a single function

Connect to a node.js server from a different network

Saving JSON variable as file in a Bash script

Angular 6: Dealing with Type Errors in the HttpClient Request

Maximum number of days that can be selected with Bootstrap Datepicker

What is the best way to set multiple headers and change the content type when needed?