using jQuery, iterate through JSON reponse (more specifically child elements)

Hi

I'm currently iterating over a JSON response but I cannot find out how to get some of the child elements and iterate over them

This is an example of one of the <Case> elements of the response:

  <Case>
    <CaseId>1905396</CaseId>
    <Type>Information request</Type>
    <Label>How long does a customer have to report a missed bin?</Label>
    <RequestDate>2015-03-17T00:00:00</RequestDate>
    <Status>All information sent</Status>
    <Attributes>
      <Complaint>No</Complaint>
      <Details>How long does a customer have to report a missed bin? How long do your collection crew have to pick up the bin? What are the ways a customer may report a missed bin?   
For the year 2012-2013 (April to March); How many missed bin collections were reported to your authority? How many collections do you undertake on a weekly basis?</Details>
      <Marketing>No</Marketing>
      <PublishInTheDisclosureLog>Yes</PublishInTheDisclosureLog>
      <ServiceRequest>No</ServiceRequest>
      <SubjectAccessRequest>No</SubjectAccessRequest>
      <SuitableForPublicationScheme>Yes</SuitableForPublicationScheme>
      <SuitableForRe-use>Yes</SuitableForRe-use>
    </Attributes>
    <Classifications>
      <Classification Group="Household waste collection">General information</Classification>
    </Classifications>
    <Documents>
      <Document Name="Bexley missed collections 201314" Type="application/vnd.ms-excel"><![CDATA[https://bexleyportal.icasework.com/servlet/ep.getImg?ref=1267796&bin=Y&auth=0&db=NnUgsj5ww2w%3D&hc=a7c95225a233e9320a2934068d869f79]]></Document>
      <Document Name="Response (all information to be supplied)" Type="application/pdf"><![CDATA[https://bexleyportal.icasework.com/servlet/ep.getImg?ref=D1199796&bin=Y&auth=0&db=NnUgsj5ww2w%3D&hc=b4505627c684550b646f736117bca5ed]]></Document>
    </Documents>
  </Case>

Open in new window


All works fine using the following code but I need to be able to iterate through the <Documents> to get all the <document> links (there could be none, 1 or more), All I keep getting is object Object?

$.each(json.Cases, function (key, value) {								
	
	$('<h3>' + value.CaseId + ' - ' + value.Label + '</h3><div><table>'
	+ '<tr><th>Request ID:</th><td>' + value.CaseId + '</td></tr>'
	+ '<tr><th>Title:</th><td>' + value.Label + '</td></tr>'
	+ '<tr><th>Received Date:</th><td>' + newDate + '</td></tr>'
	+ '<tr><th>Details:</th><td>' + value.Attributes['Details'] + '</td></tr>'
	+ '<tr><th>Documents:</th><td>' + value.Documents['Document'] + '</td></tr>'
	+ '</table></div>').appendTo('#itemsList');								

});

Open in new window


Regards
NEil
LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
first of all this is NOT JSON but XML :-)

But perhaps the following works;
$.each(json.Cases, function (key, value) {								
	var contentToAdd = '<h3>' + value.CaseId + ' - ' + value.Label + '</h3><div><table>'
	+ '<tr><th>Request ID:</th><td>' + value.CaseId + '</td></tr>'
	+ '<tr><th>Title:</th><td>' + value.Label + '</td></tr>'
	+ '<tr><th>Received Date:</th><td>' + newDate + '</td></tr>'
	+ '<tr><th>Details:</th><td>' + value.Attributes['Details'] + '</td></tr>';
	$.each(value.Documents, function (innerKey, innerValue) {
		contentToAdd += '<tr><th>Documents:</th><td>' + innerValue + '</td></tr>';
	});
	contentToAdd += '</table></div>';
	$(contentToAdd).appendTo('#itemsList');								
});

Open in new window


HTH
Rainer
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks Rainer

Apologies, I know the example I gave was XML but I'm actually calling a web service that "Should" be getting similar data and that returns as JSON.

Your example still gives me a Object object in the field. Is there any way I can write out the JSON call itself to see whats coming back?

My call is :

$.ajax({
                    type: "POST",
                    url: "http://myurl/GetFOIRequests",
                    data:  jsonEncodedRequest,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    processData: false,
                    success: function (json) {

Open in new window

Rainer JeschorCommented:
Hi,
using IE 11 Dev Tools or Chrome developer tools, you can either add the following to your code which prints the JSON object as string to the console window OR you use the network capture and get the Ajax call`s response directly.

$.ajax({
                    type: "POST",
                    url: "http://myurl/GetFOIRequests",
                    data:  jsonEncodedRequest,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    processData: false,
                    success: function (json) {
                       if (window.console) console.log(JSON.stringify(json));

Open in new window

Please attach the result, this will help a lot.

Thanks
Rainer
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks, this is the response (tidied)

{ ? 
   "Cases":[ ? 
      { ? 
         "Attributes":{ ? 
            "Complaint":"No",
            "Details":"test",
            "Marketing":"No",
            "PublishInTheDisclosureLog":"Yes",
            "Reason":null,
            "ReasonNotHeld":null,
            "ServiceRequest":"No",
            "SubjectAccessRequest":"No",
            "SuitableForPublicationScheme":"Yes",
            "SuitableForReuse":"Yes"
         },
         "CaseId":"2097896",
         "Classifications":{ ? 
            "Classification":[ ? 
               { ? 
                  "AlternativeMapping1":null,
                  "Group":"Other",
                  "Text":"Other service"
               }
            ]
         },
         "Documents":{ ? 
            "Document":[ ? 
               { ? 
                  "Name":"Response (all information to be supplied)",
                  "Text":"https://bexleyportal.icasework.com/servlet/ep.getImg?ref=D1240096&bin=Y&auth=0&db=NnUgsj5ww2w%3D&hc=72a051549c6422d1659cf0a561992b2f",
                  "Type":"application/pdf"
               }
            ]
         },
         "Label":"ICT technical training",
         "RequestDate":"2015-05-26T16:18:00",
         "Status":"All information sent",
         "Type":"Information request"
      },
      { ? 
         "Attributes":{ ? 
            "Complaint":"No",
            "Details":"1. does your council charge carers for services where they meet the eligibility criteria for carers set out within the Care Act? If no\r\n2. does your charging policy permit you to levy such charges should you decide to do so in future?\r\n3. do you plan to introduce such charges in future?",
            "Marketing":"No",
            "PublishInTheDisclosureLog":"Yes",
            "Reason":null,
            "ReasonNotHeld":null,
            "ServiceRequest":"No",
            "SubjectAccessRequest":"No",
            "SuitableForPublicationScheme":"No",
            "SuitableForReuse":"No"
         },
         "CaseId":"1998396",
         "Classifications":{ ? 
            "Classification":[ ? 
               { ? 
                  "AlternativeMapping1":null,
                  "Group":"Business support",
                  "Text":"Information and advice"
               }
            ]
         },
         "Documents":{ ? 
            "Document":[ ? 
               { ? 
                  "Name":"Response (all information to be supplied)",
                  "Text":"https://bexleyportal.icasework.com/servlet/ep.getImg?ref=D1202896&bin=Y&auth=0&db=NnUgsj5ww2w%3D&hc=00378dd91de85a14cc45066886028008",
                  "Type":"application/pdf"
               }
            ]
         },
         "Label":"Carer charges",
         "RequestDate":"2015-04-20",
         "Status":"All information sent",
         "Type":"Information request"
      }
   ]
}

Open in new window

Rainer JeschorCommented:
Hi,
thanks for sharing the object.
Then this works:
    $.each(json.Cases, function (key, value) {								
	var contentToAdd = '<h3>' + value.CaseId + ' - ' + value.Label + '</h3><div><table>'
	+ '<tr><th>Request ID:</th><td>' + value.CaseId + '</td></tr>'
	+ '<tr><th>Title:</th><td>' + value.Label + '</td></tr>'
	+ '<tr><th>Received Date:</th><td>' + new Date() + '</td></tr>'
	+ '<tr><th>Details:</th><td>' + value.Attributes['Details'] + '</td></tr>';
	$.each(value.Documents.Document, function (innerKey, innerValue) {
		contentToAdd += '<tr><th>Documents:</th><td>' + innerValue.Text + '</td></tr>';
	});
	contentToAdd += '</table></div>';
	$(contentToAdd).appendTo('#itemsList');								
});

Open in new window


Live sample:
http://jsfiddle.net/EE_RainerJ/9swdwg9j/

HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Many thanks. This is perfect :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.