Basic getJSON in for loop with innerHTML issue

Question

So I am trying to get a series of json results to present itself within a div tag using innerHTML.

   <script>
    $(document).ready(function() {
        var html2 = '';
        var thread_id = '';
        var created_thread_ids = new Array(123123, 12312312, 1231222);
        for (var i in created_thread_ids)
        {
            thread_id = created_thread_ids[i];
            $.getJSON(ravenUrl + '/docs/threads/' + thread_id, function(thread){
                html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
                document.getElementById("showit").innerHTML = html2;
            });
        }
    });
    </script>

    <div id="showit"></div>

My problem is that the variable thread.Title works perfectly but the variable thread_id only works in the first time when it goes to the url and finds the right url but the second time it shows the same id after every thread. Like this:

<div id="showit">
<div class="result">This is the first title123123</div>
<div class="result">This is the second title123123</div>
<div class="result">This is the third title123123</div>
</div>

raina77ow · Accepted Answer · 2012-09-25 18:30:08Z

The callback function you pass to $.getJSON method is a closure, and as that method is async, will work with the value of thread_id when it will be executed. That's a common gotcha, and has several workarounds, most common is using a wrapper function:

for (var i in created_thread_ids)
  (function(i){
  ...
  var thread_id = created_thread_ids[i];
  $.getJSON(ravenUrl + '/docs/threads/' + thread_id, function(thread){
    html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
    document.getElementById("showit").innerHTML = html2;
  });
  ...
  }(i));
}

... or just ...

for (var i in created_thread_ids) {
  var thread_id = created_thread_ids[i];
  $.getJSON(ravenUrl + '/docs/threads/' + thread_id, 
     ( function(thread_id) {
           return function(thread) {
               html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
               document.getElementById("showit").innerHTML = html2;
           };
     }(thread_id) ) 
  );
}

As a sidenote, I'd strongly recommend to replace (for..in) construct with the convenient for(;;) when it's used to walk over an array (or, as alternative, consider using $.each useful jQuery method).

Muthu Kumaran · Accepted Answer · 2012-09-25 16:33:29Z

0

Your created_thread_ids is a string, and it should be an array.

change

var created_thread_ids = '123123, 12312312, 1231222';

to

var created_thread_ids = new Array(123123, 12312312, 1231222);

answered Sep 25, 2012 at 16:33

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

1 Comment

Niko Over a year ago

I really appreciate your answer but it actually is an array, it is gathered earlier in the code and when I tried to simplify it here on stackoverflow I accidently made it a string in the code example. Sorry! I assure you that it is the only thing that is changed from the real code.

vittore · Accepted Answer · 2012-09-25 16:40:49Z

0

First, as Muth said you should use array and not the string

var createdThreadIds = [123123, 12312312, 1231222]

Second, your code async and you do not know how callbacks from your ajax calls, and they can be all mixed up.

Third, I would recommend you to use Deffered object returned by ajax calls and update DOM only when all calls are performed.

answered Sep 25, 2012 at 16:40

vittore

17.6k6 gold badges46 silver badges84 bronze badges

1 Comment

Niko Over a year ago

I understand why it wouldn't work thanks to your pointers but I don't really get how to get it to actually work...

Collectives™ on Stack Overflow

Basic getJSON in for loop with innerHTML issue

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related