1

I'm trying to get an array of post objects via a REST API, and modify that array to only keep the information I need.

The array of post objects comes from the WordPress REST API, so the output looks like this.

Here is what I've tried to do so far:

// We'll be pulling data from this URL.
const endpoint = 'https://wordpress.org/news/wp-json/wp/v2/posts';

// Let's create an array where we will store this data.
const articles = [];

// Let's fetch the data with JavaScript's Fetch API.
fetch(endpoint)
    .then(blob => blob.json())
    .then(data => articles.push(...data));

// If we console log at this point, we have all the posts.
console.log(articles);

// Now let's loop through the data and create a new constant with only the info we need.
const filtered = articles.map(post => {
    return {
        id: post.id,
        title: post.title.rendered,
        link: post.link,
        date: post.date,
        excerpt: post.excerpt.rendered,
    };
});

// filtered should now be an array of objects with the format described above.
console.log(filtered);

Unfortunately, that doesn't work. filtered returns an empty array. What's weird is that if instead of using fetch I just paste the contents of the JSON I get from the API directly into a constant, everything works just fine.

What am I missing here? Why can't I modify the array I get from fetch?

Thank you!

Thanks to the suggestions in the comments below, I managed to get this to work. I had to modify the array inside the then() calls, like so:

fetch(endpoint)
.then(blob => blob.json())
.then(function(data) {
    return data.map(post => {
        return {
            id: post.id,
            title: post.title.rendered,
            link: post.link,
            date: post.date,
            excerpt: post.excerpt.rendered,
        };
    });
})
.then(data => articles.push(...data));
jeherve
  • 132
  • 1
  • 18
  • I don't believe that the first `console.log(articles)` works. `fetch()` is asynchronous, you need to put all the code in the `.then()` call. – Barmar Jul 13 '17 at 09:34
  • I think I already have an array, since I pushed my data into the `articles` array I created. when I `console.log(articles);`, I see an array. – jeherve Jul 13 '17 at 09:34
  • Then `console.log(articles)` must be inside the `.then()` function, not like you show it here. – Barmar Jul 13 '17 at 09:35
  • 1
    @Barmar some browser had that bug that the console stored actual references to the Objects, instead of a copy/snapshot. So when you mutate the object it "updates" the old logs. Maybe not the text you see in your log, but definitely if you inspect some of the objects mentioned in this text. *Don't know the browser or the status of this bug from the top of my mind.* – Thomas Jul 13 '17 at 09:46
  • @Thomas It's not a bug, it's the expected behavior. When you log an object in the console, it's a live reference to the object, so modifying the object changes what you see there. – Barmar Jul 13 '17 at 09:48
  • OK, thank you all! I think I understand now! The results of the console log indeed had me confused, but the links to other questions helped me figure this out. I'll edit my questions and post the working code in a second. As @Barmar suggested I moved everything inside the `then()` call. – jeherve Jul 13 '17 at 09:54
  • @jeherve Solutions should be posted in answers, not in the question. But since this question is marked as a duplicate, you can't answer it any more. No need for you to update the question. – Barmar Jul 13 '17 at 09:56

1 Answers1

1

fetch(endpoint) is an asynchronous function. You're trying to map over the articles array before fetch has responded.

Take a look at this: Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

Andrew Burns
  • 324
  • 4
  • 10