Loop through jQuery array in each function not working

Question

I have data that I get from an API in another function. To get the data I do this:

var posts = get_posts();

I can then print to the console:

console.info( posts );

I'll end up with something like this:

[]
  0: {id: 123, date: "2018-01-01T12:00:00", slug: "asdf-xyz", author: 1, media: 1, …}
  1: {id: 123, date: "2018-01-01T12:00:00", slug: "asdf-xyz", author: 1, media: 1, …}
  ...

There's multiple entries in this array with various bits of data.

However, if I then try to loop through them and do something, the each statement doesn't do anything. It's as if it's completely ignored (which it probably is).

$.each( posts, function( index, record ) {

    alert( index );

});

What am I doing wrong here?

Edit

This is the code I have inside a function which returns (or should) return the array. Using a simple console.log returns the data, however using stringify just returns [].

$.each( object, function( key, value ) {

    var post = {
        id: value.id,
        ...
    };

    posts.push( post );

});

console.log( posts ); // prints the data out

JavaScript is not my strongest coding language so I'm assuming I'm setting up the data incorrectly perhaps?

Most likely a duplicate of this: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — ibrahim mahrir, Jun 18 '18 at 23:56
How are you getting the array `posts`? Through A(synchronous)JAX? — ibrahim mahrir, Jun 18 '18 at 23:56
When sharing data on Stack Overflow, it is often better to show the output of `console.log(JSON.stringify(posts))` so that we're not trying to guess as to the actual structure/data. It also helps because as you can see, your initial log shows an empty array, but expanding it shows entries; this is because expanding the data makes it so the data is retrieved at the moment of expansion, not at the moment of logging. — Heretic Monkey, Jun 18 '18 at 23:59
Using the JSON `stringify` function, I get `[]` in the console. I'll update the question with some extra bits that might be useful. Not sure. — , Jun 19 '18 at 14:35

score 0 · Answer 1 · answered Jun 18 '18 at 23:57

It should be alright. I've put together a working example for you. Can you spot the difference between your code and the working snippet below?

var posts = [
  { name: 'Post1' },
  { name: 'Post2' }
];

$.each(posts, function(index, record) {
  console.log(index, record);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The issue might be in the code that you're using to populate the array. Can you provide a bit more context?

I've updated the question. Perhaps it's how I'm formatting the data? — , Jun 19 '18 at 15:18

Benjamin RD · Answer 2 · 2018-06-19T15:54:51.827

0

You can print all the object with:

$.each( posts, function( index, record ) { alert(  JSON.stringify(record) ) });

Or specific keys using

$.each( posts, function( index, record ) { alert(  record["slug"] ) });

Run the code and see the demo

$(function(){
    var posts = [];

    posts.push({id: 123, date: "2018-01-01T12:00:00", slug: "asdf-xyz", author: 1, media: 1});
    
    posts.push({id: 123, date: "2018-01-01T12:00:00", slug: "asdf-xyz", author: 1, media: 1});

    $.each( posts, function( index, record ) { alert(  JSON.stringify(record) ) });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jun 19 '18 at 15:54

answered Jun 18 '18 at 23:59

Benjamin RD

11,516
14
87
157

Whilst this does seem to work, when put into my code, it doesn't for some reason. – Jun 19 '18 at 15:50
I just edited, now you can paste it into your project You have to run it into an `on ready` or another event. For example: `$(function(){ /* PUT WHOLE THE CODE HERE */ });` – Benjamin RD Jun 19 '18 at 15:54

Loop through jQuery array in each function not working

2 Answers2