List generated with JSON data

Question

List generated with JSON data

Navigation

#1 by (3 votes)
#2 by (3 votes)

3

I'm having trouble querying data from a JSON file within a list in HTML.

I put my prototype in the 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>

php javascript html jquery json

asked by anonymous 31.07.2015 / 22:25

2 answers

3

The error starts at this line:

for(state in states) {

The for..in command was created to iterate object keys, not array content. It's okay that arrays in JS are objects, but you're iterating the keys of the array, but within%% of your code expects that for is each of the values. I recommend using% common%, since % of% 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 state when the loop is nested).

31.07.2015 / 22:34

View HTML text on Twitter-Bootstrap Popover jQuery, duplicate click event

score 3 · Accepted Answer

All of these for s must be converted into enumerable loops because you have arrays instead of object keys.

The code looks 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);
});

List generated with JSON data

2 answers

Example: plnkr