For loop only calling on the last array in the object in some places and not others

Question

I'm calling on an object array from a JSON file:

if (results !=null && results.value !=null {
  for (var i = 0; i < result.value.length; i++) {
    time = results.value[i].starttime;
    place = results.value[i].location;
    who = results.value[i].attendee;
    console.log("first test", time, place, who);
  }
}
function(error) {
   alert ("Error here" + error.message);
}
$(#homepagetime).html(time);
$(#homepageplace).html(place);
$(#homepagewho).html(who);
console.log("second test", time, place, who);

The console log named "first test" successfully displays every result from the json in the following way:

12:00 India Gandhi
14:00 England Elizabeth
16:00 USA Obama

This is exactly what I'm looking for but when I for the bellow code to display the results in the homepagetime, homepageplace, and homepagewho divs, nothing appears. And for the console log "second test" I only get back the first array in the object and not the remaining e.g.:

12:00 India Gandhi

It's clearly only calling on the first array in the object but I can't understand why considering the for loop specifies all the arrays. I'm still learning JavaScript.

@ASDFGerte results.value is the name of the json I'm calling on — T.Doe
– T.Doe, Commented Oct 28, 2019 at 15:52
Are you sure the second console.log logs the first element, and not the last? — ASDFGerte
– ASDFGerte, Commented Oct 28, 2019 at 15:57
My mistake, yes! It's logging only the last one. But why is that? @ASDFGerte — T.Doe
– T.Doe, Commented Oct 28, 2019 at 15:58

Amós Assis · Accepted Answer · 2019-10-28 16:19:05Z

3

Your (display) code must be inside the loop ou you can use a string concatenation or the append() function to append data to div elements

for (var i = 0; i < results.value.length; i++) {
    time = results.value[i].starttime;
    place = results.value[i].location;
    who = results.value[i].attendee;
    console.log("first test", time, place, who);
    $(#homepagetime).append(time + '<br>');
    $(#homepageplace).append(place + '<br>');
    $(#homepagewho).append(who + '<br>);
}

edited Oct 28, 2019 at 16:19

answered Oct 28, 2019 at 16:09

Amós Assis

1615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Checkium · Accepted Answer · 2019-10-28 15:58:21Z

1

The code that displays the results is outside the loop, that means it will only execute once and not for each array element like intended. The variables time, place, and who are being set on each loop iteration and what you're left with at the end is the result of the last iteration. Note that even if you move the display code to inside the loop, the html function replaces the content currently on the element, so, each loop iteration would replace the result and you'd end up with the same content as you have currently. I suggest either concatenating the results or dynamically creating a new element for each.

answered Oct 28, 2019 at 15:58

Checkium

981 silver badge11 bronze badges

Comments

Azam Munawar · Accepted Answer · 2019-10-28 16:15:15Z

1

You should append html in loop where you assigning the values. Out of loop you will get the last value due to closure.

for (var i = 0; i < result.value.length; i++) {
    time = results.value[i].starttime;
    place = results.value[i].location;
    who = results.value[i].attendee;
    console.log("first test", time, place, who);
    $(#homepagetime).html(time);
    $(#homepageplace).html(place);
    $(#homepagewho).html(who);
  }

answered Oct 28, 2019 at 16:15

Azam Munawar

111 bronze badge

Collectives™ on Stack Overflow

For loop only calling on the last array in the object in some places and not others

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related