how does foreach works in react-redux - node.js

Question

I am making a nodejs app which can fetch flights from the KIWI api, it returns a json list, and since you parameters like from and to, it should return a list of flights.
I can successfully get that, but when I want to display everything I dont know how to do it.
This is my render:
render(){
return (
<table className="table table-hover">
<thead>
<tr>
<th>Flight #</th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody>
{this.props.flights.map(this.renderFlights)}
</tbody>
</table>
);
}
and
renderFlights(flightData){
// add key to make them unique
return(
<tr>
<td>{flightData.data[0].id}</td>
<td>{flightData.data[0].mapIdfrom}</td>
<td>{flightData.data[0].mapIdto}</td>
</tr>
);
}
{this.props.flights.map(this.renderFlights)} just maps the first one in the array, I know that I have to use foreach, but I dont know how I can use this to print everything in the list, flight id plus the from and to, so when u fetch the flights u get around 15, and I want to be able to display all the 15 flights can someone help me out here?
this returns undefined for forEach:
<tbody>
{
this.props.flights.array.forEach(element => {
this.renderFlights
})
}
</tbody>

Answer 1

I found your API and test interface here: https://skypickerbookingapi1.docs.apiary.io/#reference/check-flights/checkflights/check_flights?console=1
So it seems that you are getting this object for your response:
{
"server_time": 1516568910,
"flights_checked": false,
"extra_fee": 0,
// blah blah,
"flights": [
// first flight
{
"bags_recheck_required": false,
"dtime_unix": 1524646800,
"extra": "",
"atime_unix": 1524651600,
"priority_boarding": {
"currency": null,
"price": null,
"is_possible": false
},
"price": 313,
"currency": "NOK",
"price_new": 313,
// blah blah
},
// second flight
{
"bags_recheck_required": true,
"dtime_unix": 1524683400,
"extra": "",
"atime_unix": 1524691800,
"priority_boarding": {
"currency": null,
"price": null,
"is_possible": false
},
"price": 1560,
"currency": "NOK",
"price_new": 1560,
// blah blah
},
// more and more flights
So I'm guessing that your "this.props.flights" is referring to the "flights" property of the above object.
Now, you need to use "map", not "foreach":
this.props.flights.map(this.renderFlights) //this is correct
And your callback function should be:
renderFlights(one_single_flight){
// add key to make them unique
return(
<tr>
<td>{one_single_flight.id}</td>
<td>{one_single_flight.src_country}</td>
<td>{one_single_flight.dst_country}</td>
</tr>
);
}
}

Answer 2

This is how I was able to get the result I wanted:
renderFlights(flightData){
const result = flightData._results;
var rows = [];
for (var i = 0; i < result; i++) {
rows.push(
<tr key={i} >
<td>{flightData.data[i].mapIdfrom}</td>,
<td>{flightData.data[i].mapIdto}</td>,
</tr>
);
}
return <tbody>{rows}</tbody>;
}
This prints all the available flights for some certain date.