Resolving Elements in Array when Array Length is 0 (MongoDB, React, Axios)

Question

I am writing an application that makes a GET request through axios to a server I have written. Here is the server code that I have written that may be relevant to the issue.

app.get("/getScheduledTimes/:day/:stationId", (req, res) => {
  const {stationId, day} = req.params;
  db.collection(`${day}-schedules`).find({
    stationInfo: {$exists: true}
  }).toArray((error, result) =>{
    if(error) {
      console.log('Schedule Database Error: ', error)
    }
    let scheduledTimes;
    for(let i = 0; i < result.length; i++){
      if(result[i].stationInfo[stationId]){
        scheduledTimes = result[i].stationInfo[stationId]
        break;
      }
    }
    scheduledTimes = sortTimeArray(scheduledTimes);
    res.json({
      scheduledTimes: scheduledTimes,
      success: true,
    })
  })
})

What sortTimeArray does is basically sorts the array of objects by date. When I look at what it was sending, res.data.scheduledTimes would be an array of objects, which I expected.

When I make the request from the front end though, originTimeTable which makes one of the calls returns an array of length 0 with elements in it. However, departTimeTable returns the array as I expected.

Here is the client-side code:

getTimes = async () => {
    // Make API calls to get the timetables for the selected stations
    const {originStationId, destinationStationId} = this.state;
    const responseOrigin = await axios(`http://localhost:3002/getScheduledTimes/weekday/${originStationId}`)
    const originTimeTable = responseOrigin.data.scheduledTimes;
    const responseDestination = await axios(`http://localhost:3002/getScheduledTimes/weekday/${destinationStationId}`)
    const departTimeTable = responseDestination.data.scheduledTimes;
    await this.setState({
      originTimes: originTimeTable,
      destinationTimes: departTimeTable,
    })
  }

The result when I console.log originTimetable is:

originTimetable:  
(28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
length: 0
__proto__: Array(0)

I have read this answer and I understand that originTimetable array hasn't been resolved. I'm wondering how I can get the elements array to resolve to the array of objects like I expected.

The goal is that I would use originTimeTable and departTimeTable to then transform them into one array. Any guidance on how to resolve this issue would be great!

score 0 · Accepted Answer · answered Dec 14 '19 at 02:10

Alright, I was able to manage to figure it out after some trial and error. This involves using JSON.parse and JSON.stringify. It seems that the key is to use JSON.stringify to resolve each of those promises and then use JSON.parse to grab the values.

const originTimeTable = responseOrigin.data.scheduledTimes.map(
   time => JSON.stringify(time)
);
const departTimeTable = responseDestination.data.scheduledTimes.map(
   time => JSON.stringify(time)
);
this.setState({
   originTimes: originTimeTable,
   destinationTimes: departTimeTable,
})

This way, when I actually need it, I can just use JSON.parse like so:

let {originTimes, destinationTimes} = this.state;
originTimes = originTimes.map(time => JSON.parse(time))
destinationTimes = destinationTimes.map(time => JSON.parse(time))

Hopefully this will help someone who has run into this issue!

Resolving Elements in Array when Array Length is 0 (MongoDB, React, Axios)

1 Answers1