How to display JSON object with an array using jQuery

Question

I am using jQuery to parse and display data from a JSON file. I got everything to spit out in the browser but one of the keys in my JSON file has an array of values. So for example this is my JSON:

{
 "category" : "Stuff",
 "location_id" : {
 "longitude" : "-71.89237903999964",
 "latitude" : "41.6809076720005",
 "human_address" : "{\"address\":\"156 Plainfield Pike Rd\",\"city\":\"Plainfield\",\"state\":\"CT\",\"zip\":\"06374\"}"
 },
}

and here is my jQuery code:

$.getJSON('data.json', function(data) {
 var output = '<ul class="searchresults">';
 $.each(data, function(key, val) {
 if (val.item.search(myExp) != -1) {
 output += '<li>';
 output += '<p>' + "Category: " + val.category + '</p>';
 output += '<p>' + "Location: " + val.location_id + '</p>';
 output += '<p>' + "Business: " + val.business + '</p>';
 output += '</li>';
 }
 });
 output += '</ul>';
 $('#update').html(output);

I for some reason the output for the location_id comes up as [object, object]...can someone help me grab everything in that array?

Thanks a bunch!!!

Answer 1

Your location_id value in the JSON is not an "Array", it's an "Object". And the default String value of an Object is [object Object]. Thus, you'll need to concat your string with the various pieces of that object, not the whole:

output += '<p>' + "Location: " + 
 val.location_id.longitude + ', ' + 
 val.location_id.latitude +
 '</p>';

Or you could take the entire location_id object and stringify the JSON. That won't be terribly human readable though:

output += '<p>' + "Location: " + JSON.stringify(val.location_id) + '</p>';