访问内部数组值 json object

Question

i get this with use of xmlhttprequest then i json.parse it and then for loop through the "resonse" to populate a list.

You can see in the next picture how the array in "response" looks when i click on "[0...99].

My problem is that the for loop doesnt populate the list tag in html, but when i try to write only for albania then it works. I need help with only javascript and not jQuery. you can see my code here:

The HTML part:

        <section class="country">
        <h3 id="countries"><br /></h3>
        <nav id="countries2">
            <ul id="countrylist"></ul>
        </nav>
        </section>

Here is javascript part:

            var jsonData = JSON.parse(xhr.responseText);
            document.getElementById("countrylist").innerHTML = "";
            for (var i = 0; i < jsonData.response[i].length; i++) {
                document.getElementById("countrylist").innerHTML += "<li id='" + jsonData.response[i].code + "'>" + jsonData.response[i].name + "</li>";
            }

Here is the javascript part that works without foor loop:

                document.getElementById("countrylist").innerHTML += "<li id='" + jsonData.response[0].code + "'>" + jsonData.response[0].name + "</li>";

Answer 1

Your for loop is ending early. Your condition is wrong.

What you have

for (var i = 0; i < jsonData.response[i].length; i++) {

What you should have

for (var i = 0; i < jsonData.response.length; i++) {

Your condition is against the length of the first element and is ending immediately.

Answer 2

Looking at your for loop condition:

 for (var i = 0; i < jsonData.response[i].length; i++) {

jsonData.response[i].length is not the length of the array, but the length of one array element (in this case it is 1 ). So your loop is only executing once.

You want instead to loop over all the array, like so:

 for (var i = 0; i < jsonData.response.length; i++) {