Tengo 2 API. Con la ayuda de 1 API y la función de mapa, agregué los elementos en forma de tabla en la interfaz de usuario, pero quiero una columna más en la misma tabla que represente datos de diferentes API. Intenté usar una función de mapa separada en otra API y colocar la variable en una etiqueta de la tabla pero representó todos los elementos en la misma celda. ¿Cómo puedo agregar datos de diferentes API a la misma columna de la misma tabla?
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> </> ) }Tal vez debería probar setData con la respuesta de ambas API que dice;
He comentado la parte del código que se va a reemplazar.
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> ) } ) }Deberá representar todas las columnas para cada conjunto de datos que esté representando. Para los datos de una API, representa un elemento de columna vacío, y para el otro, todos los vacíos esperan el valor del nombre de la aplicación.
Ejemplo:
<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>