Question

I tried this with xml, but the behavior was odd from firefox to IE.
I haven’t worked with json before, so any help would be appreciated.

here’s my json:

{
   "storeList":{
      "state":[
         {
            "stateName":"Maine",
            "store":[
               {
                  "storeName":"Store 1",
                  "storeID":"store1",
                  "storeURL":"http:\/\/www.sitename.com"
               },
               {
                  "storeName":"Store 2",
                  "storeID":"store2",
                  "storeURL":"http:\/\/www.sitename.com"
               },
               {
                  "storeName":"Store 3",
                  "storeID":"store3",
                  "storeURL":"http:\/\/www.sitename.com"
               }
            ]
         },
         {
            "stateName":"Connecticut",
            "store":[
               {
                  "storeName":"Store 1",
                  "storeID":"store1",
                  "storeURL":"http:\/\/www.sitename.com"
               }
            ]
         }
      ]
   }
}

and the structure I’m going for –

<div id="storeList">
    <ul>
       <li>
          <h3>State Name 1</h3>
          <a href="storeurl" id="storeid">storename</a>
          <a href="storeurl" id="storeid">storename</a>
       </li>
       <li>
          <h3>State Name 2</h3>
          <a href="storeurl" id="storeid">storename</a>
       </li>
    </ul>
</div>

update

tried a solution below, loading the json from an external file, but I get an error that object is not defined:

$(document).ready(function() {
                    var object;
                    $.getJSON('xml/storeList.json', function(json) {
                      object = json;
                    });


                    $('#storeList').append('<ul/>')
                    $.each(object.storeList.state, function() {
                        var list = $('#storeList ul'),
                        listItem = $('<li/>'),
                        html = listItem.append($('<h3/>').text(this.stateName));

                        $.each(this.store, function() {
                        listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName));
                        });

                        list.append(html)
                    });
                    });

Answer 1

Here’s a simple example:

$('#storeList').append('<ul/>')
$.each(object.storeList.state, function() {
    var list = $('#storeList ul'),
        listItem = $('<li/>'),
        html = listItem.append($('<h3/>').text(this.stateName));

    $.each(this.store, function() {
        listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName));
    });

    list.append(html)

});

Example

EDIT

var object;
$.getJSON('xml/storeList.json', function(json) {
    object = json;
    $('#storeList').append('<ul/>')
    $.each(object.storeList.state, function() {
        var list = $('#storeList ul'),
            listItem = $('<li/>'),
            html = listItem.append($('<h3/>').text(this.stateName));

        $.each(this.store, function() {
            listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName));
        });

        list.append(html)
    });
});