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 protected]", "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?

Community · Accepted Answer · 2017-05-23 12:08:31Z

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, 2017 at 12:08

CommunityBot

11 silver badge

answered Aug 25, 2016 at 10:20

Liam

30k28 gold badges143 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3574492 Over a year ago

Throws an error in the console 57bc12cc-4d4c-4063-9b3c-54369a44812a:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1

Liam Over a year ago

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

Developer · Accepted Answer · 2016-08-25 10:21:35Z

4

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

answered Aug 25, 2016 at 10:21

Developer

6,4703 gold badges20 silver badges24 bronze badges

2 Comments

user3574492 Over a year ago

This one seemed to do it for me, the answer below threw an error.

Liam Over a year ago

So it's not JSON then. JSON !== Javascript object

Raghvendra Kumar · Accepted Answer · 2016-08-25 10:30:33Z

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); })

Collectives™ on Stack Overflow

Looping through JSON structure with jQuery

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Related