Looping through Json object in Jquery

Question

I'm sending a Json response to an Ajax function in my page. The Json looks something like this:

{"one": 21, "two": 10, "three": 19, "four": 100}

I'm now creating a function to show this inside an <h3> tag.

Here is what i tried:

$.ajax({
  url: $("#container").attr("data-url"),
  dataType: 'json',
  success: function (data) {
    var results = JSON.stringify(data)
    $('#items').text(results[0]);
    console.log(data)
  }
});

The line $('#items').text(results[0]); is to check if i could loop through the array, but instead of retrieving the first record, it only retrieves the character {. I'm sure this is because my actual code is treating the json data as a string, instead of an array, because of JSON.stringify.

How can i convert this to an array, again, so that i can loop through it and perform some other operations?

So, uh, where is `results` defined? what is the purpose of this ajax call if you're not using the data? — Kevin B, Oct 10 '19 at 20:05
The JSON object you are returning is not an array so you cannot do results[0]. Either return a valid array from server or do string manipulation to convert to array. — Nawed Khan, Oct 10 '19 at 20:07
I'm sorry, i forgot to include one line in the ajax function while creating the question, that is why it was not making sense, it should be more understandable now — Jack022, Oct 10 '19 at 20:07
"*if i could loop through the array*" you don't have an array, you have a plain object. Well, actually, you just have a string, since you do `JSON.stringify` on your `data` but *that* still holds an object, not an array. — VLAZ, Oct 10 '19 at 20:15

score 0 · Answer 1 · answered Oct 10 '19 at 20:33

$.ajax({
  url: $("#container").attr("data-url"),
  dataType: 'json',
  success: function (data) {
    //var results = JSON.stringify(data)
    //$('#items').text(results[0]);
    //console.log(data)
    let array = Object.entries(data); // [[one,1],[two,2],[three,3],[four,4]]
  }
});

you can loop the array :

let data = {
  one: 1,
  two: 2,
  three: 3,
  four: 4
};

let results = Object.entries(data);

//now you can do :
//$('#items').text(results[0]);

results.forEach( el => {
  console.log(el[0],':',el[1]);
});

score 0 · Accepted Answer · answered Oct 10 '19 at 20:40

You have an object, not an array. In jQuery you can loop through an object's properties with $.each().

$.ajax({
  url: $("#container").attr("data-url"),
  dataType: 'json',
  success: function (data) {
    $.each(data, function(key, val) {
        console.log(`${key} = ${val}`);
    });
  }
});

score 0 · Answer 3 · answered Oct 10 '19 at 20:44

Try this one. In success: function (data) {} data is your response when AJAX call is a success. data will be an object so you can iterate it in a for loop or forEach loop like this.

    $.ajax({
      url: $("#container").attr("data-url"),
      dataType: 'json',
      success: function (data) {

    for (let i in data) {
       console.log(data);
       let details = data[i];
       let itemName = details[0];
       let itemQty = details[2];
       $('#items').text(itemName );
      }
    }
  });

Looping through Json object in Jquery

3 Answers3