Generated list with JSON data

Question

I’m having trouble retrieving data from a JSON file within a list in HTML.

I put my prototype on Plunker.

Script...

$.getJSON("list.json", function (json){

    //alert("Carregou o list.json");

    var states = json.states;
    var tempHtml = '<ul>';

    for(state in states){
        tempHtml += "<li><p>"+state.name+"</p><ul>";
        for(city in state.city){
            tempHtml += "<li><p>"+city.name+"</p><ul>";

            for(store in city.stores){
                tempHtml += "<li><h1>"+store.name+"</h1><p>"+store.address+"</p><a href="+store.map+">view map</a></li>";

            }
            tempHtml += "</ul></li>";
        }
        tempHtml += "</ul></li>";

    }
    tempHtml += "</ul>";

    $('#divid').html(tempHtml);
});

JSON file...

{
    "states": [

        {
        "name": "Arizona",
        "state_abbreviation": "AZ",
        "city": [
            {
                "name": "Phoenix",
                "stores": [
                    { "name": "Store 1", "address": "Store 1 Address", "map": "http://store_1_address.com/" },
                    { "name": "Store 2", "address": "Store 2 Address", "map": "http://store_2_address.com/" },
                    { "name": "Store 3", "address": "Store 3 Address", "map": "http://store_3_address.com/" }
                ]
            },
            {
                "name": "Tucson",
                "stores": [
                    { "name": "Store 4", "address": "Store 4 Address", "map": "http://store_4_address.com/" },
                    { "name": "Store 5", "address": "Store 5 Address", "map": "http://store_5_address.com/" },
                    { "name": "Store 6", "address": "Store 6 Address", "map": "http://store_6_address.com/" }
                ]
            }
        ]
        },

        {
        "name": "California",
        "state_abbreviation": "CA",
        "city": [
            {
                "name": "Los Angeles",
                "stores": [
                    { "name": "Store 7", "address": "Store 7 Address", "map": "http://store_7_address.com/" },
                    { "name": "Store 8", "address": "Store 8 Address", "map": "http://store_8_address.com/" },
                    { "name": "Store 9", "address": "Store 9 Address", "map": "http://store_9_address.com/" }
                ]
            },
            {
                "name": "San Francisco",
                "stores": [
                    { "name": "Store 10", "address": "Store 10 Address", "map": "http://store_10_address.com/" },
                    { "name": "Store 11", "address": "Store 11 Address", "map": "http://store_11_address.com/" },
                    { "name": "Store 12", "address": "Store 12 Address", "map": "http://store_12_address.com/" }
                ]
            }
        ]

        },

        {
        "name": "Texas",
        "state_abbreviation": "TX",
        "city": [
            {
                "name": "Austin",
                "stores": [
                    { "name": "Store 13", "address": "Store 13 Address", "map": "http://store_13_address.com/" },
                    { "name": "Store 14", "address": "Store 14 Address", "map": "http://store_14_address.com/" },
                    { "name": "Store 15", "address": "Store 15 Address", "map": "http://store_15_address.com/" }
                ]
            },
            {
                "name": "Houston",
                "stores": [
                    { "name": "Store 16", "address": "Store 16 Address", "map": "http://store_16_address.com/" },
                    { "name": "Store 17", "address": "Store 17 Address", "map": "http://store_17_address.com/" },
                    { "name": "Store 18", "address": "Store 18 Address", "map": "http://store_18_address.com/" }
                ]
            }
        ]

        }

    ]
}

The result should be...

<ul>
    <li>
        <p>Arizona</p>
        <ul>
            <li>
                <p>Phoenix</p>
                <ul>
                    <li>
                        <h1>Store 1</h1>
                        <p>Store 1 Address</p>
                        <p>Phoenix - AZ</p>
                        <a href="http://store_1_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 2</h1>
                        <p>Store 2 Address</p>
                        <p>Phoenix - AZ</p>
                        <a href="http://store_2_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 3</h1>
                        <p>Store 3 Address</p>
                        <p>Phoenix - AZ</p>
                        <a href="http://store_3_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
            <li>
                <p>Tucson</p>
                <ul>
                    <li>
                        <h1>Store 4</h1>
                        <p>Store 4 Address</p>
                        <p>Tucson - AZ</p>
                        <a href="http://store_4_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 5</h1>
                        <p>Store 5 Address</p>
                        <p>Tucson - AZ</p>
                        <a href="http://store_5_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 6</h1>
                        <p>Store 6 Address</p>
                        <p>Tucson - AZ</p>
                        <a href="http://store_6_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

    <li>
        <p>California</p>
        <ul>
            <li>
                <p>Los Angeles</p>
                <ul>
                    <li>
                        <h1>Store 7</h1>
                        <p>Store 7 Address</p>
                        <p>Los Angeles - CA</p>
                        <a href="http://store_7_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 8</h1>
                        <p>Store 8 Address</p>
                        <p>Los Angeles - CA</p>
                        <a href="http://store_8_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 9</h1>
                        <p>Store 9 Address</p>
                        <p>Los Angeles - CA</p>
                        <a href="http://store_9_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
            <li>
                <p>San Francisco</p>
                <ul>
                    <li>
                        <h1>Store 10</h1>
                        <p>Store 10 Address</p>
                        <p>San Francisco - CA</p>
                        <a href="http://store_10_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 11</h1>
                        <p>Store 11 Address</p>
                        <p>San Francisco - CA</p>
                        <a href="http://store_11_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 12</h1>
                        <p>Store 12 Address</p>
                        <p>San Francisco - CA</p>
                        <a href="http://store_12_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

    <li>
        <p>Texas</p>
        <ul>
            <li>
                <p>Austin</p>
                <ul>
                    <li>
                        <h1>Store 13</h1>
                        <p>Store 13 Address</p>
                        <p>Austin - TX</p>
                        <a href="http://store_13_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 14</h1>
                        <p>Store 14 Address</p>
                        <p>Austin - TX</p>
                        <a href="http://store_14_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 15</h1>
                        <p>Store 15 Address</p>
                        <p>Austin - TX</p>
                        <a href="http://store_15_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
            <li>
                <p>Houston</p>
                <ul>
                    <li>
                        <h1>Store 16</h1>
                        <p>Store 16 Address</p>
                        <p>Houston - TX</p>
                        <a href="http://store_16_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 17</h1>
                        <p>Store 17 Address</p>
                        <p>Houston - TX</p>
                        <a href="http://store_17_address.com/">View Map</a>
                    </li>
                    <li>
                        <h1>Store 18</h1>
                        <p>Store 18 Address</p>
                        <p>Houston - TX</p>
                        <a href="http://store_18_address.com/">View Map</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

The error starts on this line:

for(state in states) {

The command for..in was created to iterate object keys, not array content. It’s okay that JS arrays are objects, only you’re iterating the keys array, but within the for your code hopes that state be each of the values. I recommend using a for common, since for..in in arrays creates the risk of unwanted side effects:

var state;
for(var i=0; i<states.length; i++) {
    state = states[i];
    // daqui em diante, seu código fica como está

And as @Sergio said, make the same change in the other loops (using another variable as index instead of i when the loop is nested).

Answer 2

All these fors have to be converted into enumerable loops because you have arrays instead of object keys.

The code would look like this:

$.getJSON("list.json", function (json) {

    //alert("Carregou o list.json");
    var states = json.states;
    var tempHtml = '<ul>';

    for (var i = 0; i < states.length; i++) {
        var state = states[i];
        tempHtml += "<li><p>" + state.name + "</p><ul>";
        for (var j = 0; j < state.city.length; j++) {
            var city = state.city[j];
            tempHtml += "<li><p>" + city.name + "</p><ul>";

            for (var x = 0; x < city.stores.length; x++) {
                var store = city.stores[x];
                tempHtml += "<li><h1>" + store.name + "</h1><p>" + store.address + "</p><a href=" + store.map + ">view map</a></li>";

            }
            tempHtml += "</ul></li>";
        }
        tempHtml += "</ul></li>";

    }
    tempHtml += "</ul>";

    $('#divid').html(tempHtml);
});

Example: plnkr