Calling child API in React JS - reactjs

Question

I am trying to call API and display the data on table in react js. The API structure is like:
"items" : [ {
"#id" : "http://ABCD......" ,
"dateTime" : "2022-05-28T00:00:00Z" ,
"measure" : "http://measurement_1/abc" ,
"value" : 0.066
}
, {
"#id" : "http://ABCD......" ,
"dateTime" : "2022-05-28T00:15:00Z" ,
"measure" : "http://measurement_2/abc" ,
"value" : 0.066
}
, {
"#id" : "http://ABCD......" ,
"dateTime" : "2022-05-28T00:45:00Z" ,
"measure" : "http://measurement_3/abc" ,
"value" : 0.066
}
]
I was able to display 3 columns 'dateTime','measure','value' using following code.
class App extends React.Component{
state ={
items:[]
};
async componentDidMount(){
const response = await fetch('/L1931/readings?today');
const body = await response.json();
this.setState({items:body.items});
}
render(){
const {items} = this.state;
const itemList = items.map(item => {
return <tr key={item.dateTime}>
<td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
<td>{item.value}</td>
<td>{item.measure}</td>
</tr>
});
return (
<div>
<Table className="mt-4">
<thead>
<tr>
<th width="30%">Date</th>
<th width="30%">Value</th>
<th width="40%">Measurement</th>
</tr>
</thead>
<tbody>
{itemList}
</tbody>
</Table>
</div>
);
}
}
The output is like
Now, I want to call the child API under 'Measurement' column and display a certain column in the table. Can anybody help me to achieve this?

Answer 1

You can use Promise.all() for that use case. The following example will call all the measure URLs and then replace each measure field with API response.
async componentDidMount() {
const response = await fetch("/L1931/readings?today");
const body = await response.json();
Promise.all(
body.items.map(async (item) => {
const res = await fetch(item.measure);
const data = await res.json();
return { ...item, measure: JSON.stringify(data) };
})
).then((newItems) => {
this.setState({ items: newItems });
});
}
You can change the return { ...item, measure: JSON.stringify(data) } depending on the format you want.
Working Demo