Using counter on $.each Jquery

Question

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++;
                });
 });

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
– Felix Kling, Commented Mar 3, 2012 at 10:53

Felix Kling · Accepted Answer · 2012-03-03 11:06:38Z

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`

dotoree · Accepted Answer · 2012-03-03 10:52:31Z

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
 });

answered Mar 3, 2012 at 10:52

dotoree

2,9911 gold badge26 silver badges29 bronze badges

4 Comments

Felix Kling Over a year ago

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]?

dotoree Over a year ago

@Felix Kling No see stackoverflow.com/questions/2342371/… i variable will be the key

Felix Kling Over a year ago

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?

dotoree Over a year ago

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.

Marnix · Accepted Answer · 2012-03-03 10:53:21Z

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.

answered Mar 3, 2012 at 10:53

Marnix

6,5874 gold badges47 silver badges84 bronze badges

Comments

Ranganadh Paramkusam · Accepted Answer · 2012-03-03 10:58:25Z

-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

answered Mar 3, 2012 at 10:58

Ranganadh Paramkusam

4,3882 gold badges25 silver badges33 bronze badges

1 Comment

Ranganadh Paramkusam Over a year ago

For the question ur answer is correct, but i tried with the selector on main site, used ur code because it is correct

Collectives™ on Stack Overflow

Using counter on $.each Jquery

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related