Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I am new to jQuery and Java script. I need to parse a JSON file that has arrays, I use this code:

$.getJSON('mat.json', function(data) {
    var items = [];
    $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
    });

    $('<ul/>', {'class': 'my-new-list', html: items.join('')}).appendTo('body');
});

For this JSON file:

{
    "@file_name": "materials",
    "materials": [{
        "@site_name_English": "N/A",
        "@site_name_Spanish": "N/A",
        "@site_number": "1",
        "zoom": [{
            "@zoom_name_English": "Main Reservoir",
            "@zoom_name_Spanish": "Depósito principal",
            "@zoom_number": "1",
            "icon": [
                {
                    "@icon_name": "Info Icon 1",
                    "@icon_pin": "1"
                },
                {
                    "@icon_name": "Info Icon 2",
                    "@icon_pin": "2"
                }
            ]
        }]
    }]
}

But my result is:

materials
[object Object]

How can I change my code so I will get the objects also when the loop meets them?

share|improve this question
 
What properties of your JSON objects do you want to see in your li id and content, respectively? –  Raibaz Aug 8 at 8:05
 
It wouldn't hurt to provide a jsFiddle ;-) –  Dzulqarnain Nasir Aug 8 at 8:06
add comment

1 Answer

up vote 1 down vote accepted

Use this:

$.each(data, function(key, val) 
{
    if(typeof val === 'object') {
         $.each(val, function(keys, value) 
         {
         items.push('<li id="' + keys + '">' + value + '</li>'); 
         }
    } else {
       items.push('<li id="' + key + '">' + val + '</li>');
    }
});

You need to check that value is object or not.

EDITED:

function checkObj(key, val, items){
   if(typeof val === 'object') {
         $.each(val, function(keys, value) 
             {
            if(typeof value === 'object') {
                checkObj(keys, value, items);  
            } else {
               items.push('<li id="' + keys + '">' + value + '</li>'); 
            }
        });
    } 
}

And in the $.each function use this:

$.each(data, function(key, val) 
{
    if(typeof val === 'object') {
         checkObj(key, val, items);
    } else {
       items.push('<li id="' + key + '">' + val + '</li>');
    }
});
share|improve this answer
 
This is exactly what I need, but its not working :( –  DanM Aug 8 at 9:08
 
@DanM you need to create a function that will be recursive function to read such JSON data. Give me time I will create that for you. –  Broken Heart ღ Aug 8 at 9:15
 
Thank you very much! –  DanM Aug 8 at 9:32
 
@DanM I have updated the answer. –  Broken Heart ღ Aug 8 at 9:52
 
WOW Thank you!!!! This is very kind of you and it works! –  DanM Aug 8 at 9:57
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.