0

Im having problems using a counter with $.each I am getting a JSON feed and then want to loop out the 'title' of the results. If I use a number then it works but when I try using a counter 'ie var i = 1', it doesnt work. I think it is something to do with the variable not being passed to the function correctly?

Thanks

  var i = 1;

  $.getJSON("http://www.aaronlumsden.com/api/?json=get_category_posts&slug=portfolio",function(data) {

   $.each(data, function(i) {
                    $('#navScroller').append('<li><a rel=""href="" title="">'+data.posts[i].title+'</a></li>');
                    i++;
                });
 });
Aaron Lumsden
  • 424
  • 1
  • 5
  • 21
  • 1
    The parameter `i` you define for the callback shadows the variable `i` you define. You could just omit the parameter, but I think there is a much easier solution than using a counter, depending on `data`. – Felix Kling Mar 03 '12 at 10:53

4 Answers4

4

Even when fixing the shadow problem, I don't think your code will work like expected.

data is an object and $.each() [docs] iterates over each property of the object. So far I can see that it has 5 properties (here as JSON):

{
    "status":"ok",
    "count":8,
    "pages":1,
    "category":{...},
    "posts": [...]
}

If these are the only ones, $.each() will call the callback five times, which means you get the title of the first five posts. Or in case there are less than 5 posts, you will get an error.

I think you actually want to iterate over all posts from the response, which would be:

var $scroller = $('#navScroller');
$.each(data.posts, function(i, post) {
    $scroller.append('<li><a rel=""href="" title="">'+post.title+'</a></li>');
});

If you have many posts it also makes sense to create the complete HTML string beforehand and only call .append() once, for example:

$('#navScroller').append($.map(data.posts, function(post) {
    return '<li><a rel=""href="" title="">'+post.title+'</a></li>';
}).join('')); // not sure if you actually need `.join`
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
2
var k = 1;

  $.getJSON("http://www.aaronlumsden.com/api/?json=get_category_posts&slug=portfolio",function(data) {

   $.each(data, function(i) {
     $('#navScroller').append('<li><a rel=""href="" title="">'+data.posts[i].title+'</a></li>');
     k++;
   });
   // Use k here
 });
dotoree
  • 2,983
  • 1
  • 24
  • 29
  • I cannot imagine how this should work... `i` will be the name of a property of `data` (i.e. a string) but `data.posts` is an array, so `data.posts[i]` will be `undefined`. Did you mean `data.posts[k]`? – Felix Kling Mar 03 '12 at 11:06
  • @Felix Kling No see http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each i variable will be the key – dotoree Mar 03 '12 at 11:13
  • Ok, three remarks on that: (a) If you read my answer you will see that `data` is not an array but an **object**. Have you actually looked at the URL and the response? In the question you linked to, `data` is an array, that is a different scenario. (b) If `data` was an array, it would not have a property `data.posts` and even if it had, what makes you think that `data` and `data.posts` have the same length? What if `data.post` is shorter than `data? (c) Why do you keep a useless variable `k` in your example then? – Felix Kling Mar 03 '12 at 11:22
  • Yes, you 're right, didn't see you answer. I meant that data.posts would be array containing objects. Regarding k var, I put it instead of i to fix the code. – dotoree Mar 03 '12 at 11:56
0

In the each-function. You declare a parameter i. This overrides the var i = 1 that is on the first line. Remove the i in function(i) and I think it will be fine.

Marnix
  • 6,384
  • 4
  • 43
  • 78
-1
var k = 1;

  $.getJSON("http://www.aaronlumsden.com/api/?json=get_category_posts&slug=portfolio",function(data) {

   $.each(data.posts, function(i) {
     $('.nav').append('<li><a rel=""href="" title="">'+data.posts[i].title+'</a></li>');
     k++;
   });
   // Use k here
 });

I tried in that website. It is working

Ranganadh Paramkusam
  • 4,258
  • 2
  • 22
  • 33