Question

I’ve done some searching, but I’ve been unable to fully understand how this is done. I am relatively new to jQuery and JSON. Basically, I have a massive JSON document that I am connecting to and displaying various data from it. The data I need is the Supplier Label, which is nested three levels down, and I’m unsure how to return it.

The JSON

    {
    "@order": "1",
    "category": {
        "@id": "204",
        "label": "Category 1",
        "suppliers": {
            "supplier": {
                "label": "Business 1",
                "customicons": [
                    {
                        "@id": "images/img2.jpeg",
                        "#text": "random icon"
                    }
                ]
            }
         }
       }
    },

Here’s the script that I’ve made to form an unordered list. I tried item.category.suppliers.supplier.label, which obviously isn’t working. Do I need to add some function that iterates through each sub level? How do I get to that label?

    <script type="text/javascript">
$(document).ready(function(){

    $.getJSON('jsonarray.json', 
    function(data) {

      var items = [];

      $.each(data, function(i,item) {

        items.push('<li id="' + item["@order"] + '"><label for="supplier"><input id="supplier" name="supplier" type="checkbox" class="checkbox"/>' + item.category.suppliers.supplier.label + '</label></li>');

      });

      $('<ul/>', {
        'class': 'checklist-supplier cl2',
        html: items.join('')
      }).appendTo('.list_filter_supplier_side');
    });

});
</script>

So, basically the question is how do I access sub level data in JSON using jQuery? Any clarification is greatly appreciated.

Answer 1

is the JSON in some sort of response? If so you can do something like this:

var d = {
"@order": "1",
"category": {
    "@id": "204",
    "label": "Category 1",
    "suppliers": {
        "supplier": {
            "label": "Business 1",
            "customicons": [
                {
                    "@id": "images/img2.jpeg",
                    "#text": "random icon"
                }
            ]
        }
     }
   }
}

//just show the label    
alert(d.category.suppliers.supplier.label);

jsFiddle Example