I have 2 APIs. With the help of 1 API and map function, I appended the items in form of a table on UI but I want one more column in the same table that renders data from different APIs.I tried using a separate map function on another API and placing the variable in one tag of the table but it rendered all items to the same cell. How can I add data from different APIs to the same column of the same table?
const App = () => {
const [data2, setData2] = useState([])
const [app, setApp] = useState([])
const getData = async () => {
try {
let url = API1;
let url2 = API2;
const res = await fetch(url);
const dataset = await res.json();
const res2 = await fetch(url2);
const dataset2 = await res2.json();
setData2(dataset.data);
setApp(dataset2.data)
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getData()
}, [])
// trying to iterate over 2nd API key
const addData = app.map((item)=>{
return item.app_name
})
const DisplayData = data2.map(
(item, index)=>{
return(
<tr key={index}>
<td>{index + 1}</td>
<td>{new Date(item.date).toDateString()}</td>
// want to create one more column in the same table that renders different data
<td>{addData}</td>
<td>{item.requests}</td>
<td>{item.responses}</td>
<td>{item.impressions}</td>
</tr>
)
}
)
return (
<>
<div className="card w-50 mx-auto">
<table className="table table-stripped">
<thead>
<tr>
<th>S. no</th>
<th>Date</th>
<th>App</th>
<th>Clicks</th>
<th>Requests</th>
<th>Revenue</th>
<th>Fill rate</th>
<th>CTR</th>
</tr>
</thead>
<tbody>
{DisplayData}
</tbody>
</table>
</div>
</>
)
}
Maybe you should try setData with the response of both API's which goes;
I've commented the part of code to be replaced.
const App = () => {
//const [data2, setData2] = useState([])
//const [app, setApp] = useState([])
const [data, setData] = useState([]);
const getData = async () => {
try {
let url = API1;
let url2 = API2;
let response = [];
const res = await fetch(url);
const dataset = await res.json();
const res2 = await fetch(url2);
const dataset2 = await res2.json();
response.push(dataset.data);
response.push(dataset2.data);
//setData2(dataset.data);
//setApp(dataset2.data);
setData(data.flat(1));
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getData()
}, [])
// trying to iterate over 2nd API key
const addData = app.map((item)=>{
return item.app_name
})
const DisplayData = data.map(
(item, index)=>{
return(
<tr key={index}>
<td>{index + 1}</td>
<td>{new Date(item.date).toDateString()}</td>
// want to create one more column in the same table that renders different data
<td>{addData}</td>
<td>{item.requests}</td>
<td>{item.responses}</td>
<td>{item.impressions}</td>
<td>{{/* return all the data of 2nd api response}}</td>
</tr>
)
}
)
}
You will need to render all columns for each set of data you are rendering. For one API's data you render an empty column element, and for the other all empty expect for the app name value.
Example:
<table className="table table-stripped">
<thead>
<tr>
<th>Date</th>
<th>App</th>
<th>Clicks</th>
<th>Requests</th>
<th>Revenue</th>
<th>Fill rate</th>
<th>CTR</th>
</tr>
</thead>
<tbody>
{/* Render API1 data */}
{data2.map((item) => (
<tr key={item.id}>
<td>{new Date(item.date).toDateString()}</td>
<td />
<td>{addData}</td>
<td>{ clicks data??? }</td>
<td>{item.requests}</td>
<td>{item.responses}</td>
<td>{item.impressions}</td>
</tr>
))}
{/* Render API2 data */}
{app.map((item) => (
<tr key={item.id}>
<td />
<td>{item.name}</td>
<td />
<td />
<td />
<td />
<td />
</tr>
))}
</tbody>
</table>