How do I iterate over a nested JSON during Ajax?

Question

I have this JSON:

{
  "draw": 0,
  "recordsTotal": 90,
  "recordsFiltered": 41,
  "data": [
    {
      "id": "5",
      "art": "default/def2.jpg",
      "full_name": " ",
      "title": "Hellberg - The Girl | Atomik Remix",
      "tag": "music",
      "time": "2015-11-14",
      "": ""
    },
    {
      "id": "8",
      "art": "default/def2.jpg",
      "full_name": "Simon Deoro",
      "title": "Tim McMorris-On (Single)",
      "tag": "dance,popular,",
      "time": "2015-11-14",
      "": ""
    },
    ...
   ]
}

I want to return all id's inside data, so I tried this function:

function getPlaylist(id) {
    $.ajax({
        type: "GET",
        url: baseUrl+"/playlist.php?id="+id,
        cache: false,
        success: function(result) {
            var samples = JSON.parse( result );
            for (i in samples)
            {
              console.log(samples.data[i].id + "<br />");
            }
        }
    });
}

however I see this error from console

Uncaught TypeError: Cannot read property 'id' of undefined

I tried also this for loop (syntax error from console)

for(var i = 0; i < samples.data.length; i++)
{
    var product = samples.data[i];
    var productId = product.id;
    console.log(productId);
}

All I want is output 5, 8 (my id's)

I'm not very familiar with JSON, so how can I access and iterate over my structure correctly?

Possible duplicate of [How do I iterate over a JSON structure?](http://stackoverflow.com/questions/1078118/how-do-i-iterate-over-a-json-structure) — Ryan, Jan 25 '17 at 22:02

Abhinav Galodha · Answer 1 · 2017-01-25T22:23:34.150

You can try using the map function to transform the array to another array.

 var dataJSON = {
      "draw": 0,
      "recordsTotal": 90,
      "recordsFiltered": 41,
      "data": [
        {
          "id": "5",
          "art": "default/def2.jpg",
          "full_name": " ",
          "title": "Hellberg - The Girl | Atomik Remix",
          "tag": "music",
          "time": "2015-11-14",
          "": ""
        },
        {
          "id": "8",
          "art": "default/def2.jpg",
          "full_name": "Simon Deoro",
          "title": "Tim McMorris-On (Single)",
          "tag": "dance,popular,",
          "time": "2015-11-14",
          "": ""
        },
        
       ]
    };
        

var obj = dataJSON.data.map((currentValue) => currentValue.id);
console.log(obj);

In the ajax function, you can replace the code like this

function getPlaylist(id) {
    $.ajax({
        type: "GET",
        url: baseUrl+"/playlist.php?id="+id,
        cache: false,
        success: function(result) {
            var samples = JSON.parse( result );
            var idArray = samples.data.map(x => x.id);
            console.log(idArray);
        }
    });

Could you please show me how to do this on my Ajax request? – NineCattoRules Jan 25 '17 at 22:15 — NineCattoRules, Jan 25 '17 at 22:15

byumark · Accepted Answer · 2017-01-25T22:15:10.237

1

samples needs to be samples.data.

function getPlaylist(id) {
    $.ajax({
        type: "GET",
        url: baseUrl+"/playlist.php?id="+id,
        cache: false,
        success: function(result) {
            var samples = JSON.parse( result );
            for (i in samples.data)
            {
              console.log(samples.data[i].id + "<br />");
            }
        }
    });
}

edited Jan 25 '17 at 22:15

answered Jan 25 '17 at 22:07

byumark

298
1
6

from console I see `Uncaught SyntaxError: Unexpected token u in JSON at position 0` – NineCattoRules Jan 25 '17 at 22:13
now I see `Uncaught SyntaxError: Unexpected token < in JSON at position 1` – NineCattoRules Jan 25 '17 at 22:17
1

hmmm... it should be working. Are you sure that the json returned is valid json? Here is an example, like yours, but with dummy data: http://jsbin.com/jexujohiqe/1/edit?js,console – byumark Jan 25 '17 at 22:48
1

@NineCattoRules That means your server script isn't returning valid JSON. It's probably sending HTML before the JSON. Fix the script so it doesn't output anything except `echo json_encode(...);` – Barmar Jan 25 '17 at 22:48
@NineCattoRules You could add `console.log(result)` as the first line in your success function. That should tell you what is being returned. – byumark Jan 25 '17 at 23:10

How do I iterate over a nested JSON during Ajax?

2 Answers2