Javascript call function once loop finishes and jQuery populates content

Question

I'm trying to get my jQuery to work in this flow:

Parse json using $getJson
Loop through returned JSON and create divs for each JSON item
Once done, repeat but instead with another json file and append the results to the existing results.

But as of now I can't call another function AFTER the first loop is done, because the function gets called before the page is populated. How can I finish the populating loop, and then call another function?

I appreciate any help you can give me. Still learning as you can tell.

function test() {
  var i;
  for(i=0;i<=10;i++) {
    $("div#test").append("<div id='"+i+"'></div>");
  }
  when_loop_is_done();
}
function when_loop_is_done() {
  var i;
  for(i=0;i<=10;i++) {
    $("div#test div#"+i).append("<span>foo</span>");
  }
}

Essentially I'm grabbing JSON from a separate page on my server, then looping through and populating the content using variables from that JSON object. The issue is no matter what I do, the second function always gets called before jQuery populates the content. So if I were to call an alert after the loop is done the page would pop up the alert and then load in all of the appended html.

Edit your post to add a sample of your code. It will make it easier to offer advice. — RoccoC5
– RoccoC5, Commented Oct 21, 2011 at 6:04

jfriend00 · Accepted Answer · 2011-10-21 06:06:40Z

1

Store your results in a variable or property. Then, use $(document).ready(fn) to wait for the page to finish loading and populate the page or finish your work when it has finished loading.

answered Oct 21, 2011 at 6:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

Baehr Over a year ago

So have a document ready function and detect weather or not the loop has finished? And if it has call the other function?

Ryan Over a year ago

If you know the JSON will be parsed before pageload everytime, then jfriend00 was just saying you should store those results in a variable, and then append to the divs in the ready fn. So, your entire test function should be inside ready with the assumption that the JSON is ready after page completes loading.

Baehr Over a year ago

So basically parse json and then call the document ready fn. And in the ready fn is where all of the data will be appended? It doesn't work; getting a 'cannot read property of undefined' when trying to read data[0].test from inside the ready fn. So I'm guessing the JSON isn't being parsed before the page is loaded.

morecchia808 · Accepted Answer · 2016-06-28 04:27:44Z

0

Your code should look something like this:

   $.getJSON('/remote.json', function (response) {
     // do the first loop using the response json
   })
   .done(function () {
     // do the second json request and loop through the results
   });

Any code you call inside the done() method's callback function will wait until the previous method in the chain is complete. You should definitely review the API documentation for $.getJSON: https://api.jquery.com/jquery.getjson/

answered Jun 28, 2016 at 4:27

morecchia808

4566 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript call function once loop finishes and jQuery populates content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related