3

Estou com problemas para consultar dados de um arquivo JSON dentro de uma lista no HTML.

Coloquei meu protótipo no 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);
});

Arquivo JSON...

{
    "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/" }
                ]
            }
        ]

        }

    ]
}

O resultado deve ser...

<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>

2 Respostas 2

3

Todos esses fors têm de ser convertidos em loops enumeráveis pois tens arrays em vez de chaves de objetos.

O código ficaria assim:

$.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);
});

Exemplo: plnkr

3

O erro começa nesta linha:

for(state in states) {

O comando for..in foi criado para iterar chaves de objetos, e não conteúdo de arrays. Tudo bem que arrays em JS são objetos, só que você está iterando as chaves da array, mas dentro do for seu código espera que state seja cada um dos valores. Eu recomendo usar um for comum, já que for..in em arrays cria o risco de efeitos colaterais indesejados:

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

E como disse o @Sergio, faça a mesma alteração nos demais loops (usando outra variável como índice em vez de i quando o loop for aninhado).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .