Looping through JSON structure with jQuery

Question

I am having some troubles with looping through a JSON structure through jQuery,

Here is my JSON data:

  {
    "suppliers": [
        {
            "Supplier": {
                "id": "5704ebeb-e5e0-4779-aef4-16210a00020f",
                "name": "Gillmans",
                "mobile": "",
                "office_telephone": "00000",
                "ooh_contact": "00000",
                "fax_number": "",
                "address_line_1": "St Oswalds Road",
                "address_line_2": "Gloucester",
                "address_line_3": "",
                "address_line_4": "",
                "postcode": "GL1 2SG",
                "email": "email@example.com",
                "contact": "",
                "position": "",
                "aov": "180.00",
                "engineer": false,
                "cc_on_new_job_emails": true,
                "can_add_quotes": false,
                "notes": "",
                "status": "1",
                "created": "2016-04-06 11:58:51",
                "modified": "2016-07-27 11:23:01",
                "status_text": "Active",
                "engineer_text": "No",
                "cc_on_new_job_emails_text": "Yes"
            },
            "Trade": [],
            "PostcodeArea": []
        },
        {
            "Supplier": {
                "id": "571e390f-91e8-4745-8f78-168b0a00020f",
                "name": "Kings",
                "mobile": "",
                "office_telephone": "00000",
                "ooh_contact": "0000",
                "fax_number": "",
                "address_line_1": "",
                "address_line_2": "",
                "address_line_3": "",
                "address_line_4": "",
                "postcode": "",
                "email": "",
                "contact": "",
                "position": "Account Manager; Joanne Brook",
                "aov": null,
                "engineer": false,
                "cc_on_new_job_emails": false,
                "can_add_quotes": false,
                "notes": "",
                "status": "1",
                "created": "2016-04-25 16:34:39",
                "modified": "2016-07-08 15:22:15",
                "status_text": "Active",
                "engineer_text": "No",
                "cc_on_new_job_emails_text": "No"
            },
            "Trade": [],
            "PostcodeArea": []
        }
]
}

This JSON is returned from my AJAX call in a variable called data. data is a Javascript object, i.e. it's already been parsed by the ajax call.

I am trying to loop through this JSON data and grab the name and id properties. Here is how I have done it:

  $.each(data, function(k, v) {    
            $.each(this, function(key, val) {
                $.each(this, function(key2, val2) {
                    $.each(this, function(key3, val3) {
                    if(key3 == 'name')
                    {
                    alert(val3);
                    }

                      });
                   });
                });
            });

This will print all of the name values but obviously this is quite a messy way and I was wondering if there is an easier way I can get the name and id properties of this structure and store them in variables?

score 5 · Answer 1 · edited May 23 '17 at 12:08

5

You can deal with the JSON as an object if you parse it:

//this has already been done by the ajax call by the sounds of it.
//var jsObj = JSON.parse(data);

//suppliers is an array now ([]), so loop it
$.each(data.suppliers, function(index, value){
    //value is a supplier object ({}) so you can acces it's properties directly
    alert(value.Supplier.name);
});

edited May 23 '17 at 12:08

Community

1
1

answered Aug 25 '16 at 10:20

Liam

27,717
28
128
190

Throws an error in the console `57bc12cc-4d4c-4063-9b3c-54369a44812a:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1` – user3574492 Aug 25 '16 at 10:31
you didn't clarify if data is a string or an object? That error seems to imply it's an object and therefore isn't JSON at all. [Javascript object Vs JSON](http://stackoverflow.com/questions/8294088/javascript-object-vs-json) – Liam Aug 25 '16 at 10:32

score 4 · Accepted Answer · answered Aug 25 '16 at 10:21

4

$.each(data.suppliers, function(){
    alert(this.Supplier.id);
});

answered Aug 25 '16 at 10:21

Developer

6,240
3
18
24

This one seemed to do it for me, the answer below threw an error. – user3574492 Aug 25 '16 at 10:31
So it's not JSON then. JSON !== Javascript object – Liam Aug 25 '16 at 10:34

score 0 · Answer 3 · answered Aug 25 '16 at 10:30

Try this :

var data = {
           "suppliers":[
              {
                 "Supplier":{
                    "id":"5704ebeb-e5e0-4779-aef4-16210a00020f",
                    "name":"Gillmans"
                 },
                 "Trade":[

                 ],
                 "PostcodeArea":[

                 ]
              },
              {
                 "Supplier":{
                    "id":"571e390f-91e8-4745-8f78-168b0a00020f",
                    "name":"Kings"
                 },
                 "Trade":[

                 ],
                 "PostcodeArea":[

                 ]
              }
           ]
        }

     $.each(data.suppliers, function(k, v) {    
           alert(this.Supplier.id);
       })

Looping through JSON structure with jQuery

3 Answers3