DEV Community

Fetch returns an array, but javascript doesn't recognise fields.

Simone Aronica on February 06, 2020

Background I'm creating a website for my school using react and node.js. Now when I fetch all the articles the fetch actually sends all ...

Read full post

Daniel Brady • Feb 6 '20

Hi @itssimonedev, can you clarify what problem you are having?

I understand you are fetching some results from an API, and getting them back in an array of JS objects.

The title of your post says something about "JS doesn't recognize fields," and your post itself says something about not having all the data, but it's not clear what issue you are having.

Maybe sharing a snippet of code that:

shows the data you are trying to access
how you are accessing it
your expected vs. actual results

can help us help you 😄

Simone Aronica • Feb 6 '20 • Edited

Yes, you're right, I should have given a bit more of explanation.
I'm retrieving some data about articles in a database.

const ArticleSchema = new Schema({
  title: String,
  author: {
    type: Schema.Types.ObjectId,
    ref: "User"
  },
  body: String,
  tags: [String],
  created: {
    type: Date,
    default: Date.now
  },
  published: {
    type: Boolean,
    default: false
  }
});

In this exact case I need to render a list with all the articles inside the database (Only two at the moment) so from a restful route I fetch those articles:

async function _listAllArticles({offset = 0, limit = 10}) {
  const articles = await ArticleModel.find({ published: true })
    .select("-published")
    .sort({ created: "asc" })
    .skip(offset)
    .limit(limit);
  return articles;
}

...

app.get("/api/article/fetchlatest", (req, res) => {
  const offset = parseInt(req.query.offset) || 0;
  article._listAllArticles({offset: offset}).then(list => res.json(list));
});

and this is the response:

so I get all the data I need from fetching.

Now to the problem, this is the snippet of the fetch:

fetch(`/api/article/fetchlatest?offset=${offset}`)
      .then(res => res.json())
      .then(res => {
        console.log(res);
        setList(res);
        setFetched(true);
        setOffset(offset + 10);
      });

After that res.json() even though checking in the network tab I get two elements in the array, the resulting array from res.json() is:

so basically I retrieve n elements from the array, but that res.json() always returns an array of x elements where x is always less than the expected n value.

The weirdest thing is that you can see from the second picture that the minimized version of the console.log is (2)[{...}, {...}], but upon expanding you can only see one field in the array and the length is 1 instead of 2.

I hope this helps in explaining my problem. Basically, I fetch some data and when I res.json() that data, it simply won't return the whole array.

Daniel Brady • Feb 6 '20 • Edited

Thanks Simone, that's much clearer! Strange indeed 🤔

One theory I have is that the fetch is working properly, but one of the functions after your console.log(res) is actually modifying the contents of res, causing one of the results to be removed.

The basis of my theory is on that dev console weirdness: Chome lazily evaluates logged objects (I think that little blue info tag on the output says something about it, IIRC). So I think res has two objects when you log it out, but only one object by the time you expand the log details in the console 😬

I could definitely be wrong here, but it's easy to verify: just remove those set* statements after the log and see what's in the console. 🤞

Simone Aronica • Feb 6 '20

That's why I can't stop thinking about it... That setList is the only one in the code, and since list is a const I couldn't set it without using hooks anyways. There is literally nothing touching list after that setList... It's... Crazy

Daniel Brady • Feb 6 '20

So are you saying you tried removing the set* calls and it still didn't work?

Also, const doesn't impact your ability to change inherently mutable data structures like arrays: it just prevents variable assignments. So anything could be changing your list if you give them a handle to it. Simple example:

If you want to understand const a bit deeper, I recently wrote a post about it:

Using JS: const

Daniel Brady ・ Jan 20 ・ 10 min read

#javascript #thinkdeep #spec

Simone Aronica • Feb 6 '20 • Edited

I have no set calls to remove, because the only setList call that I have is in that section I've shown you. I was wondering on whether a list = something could have changed those values but since I used the hook const [list, setList] = useState() list can only be modified through setList, and its only instance is the one I've shown. Also the problem is far beyond that, because I'm not logging the list, but the result res.json() itself, so it's as if it had not the time to process everything (Impossible, since res.json() returns a promise...