He estado tratando de obtener datos de una API y mostrarlos en mi componente React.
¡Finalmente he llegado a un punto en el que casi funciona! Obtengo los datos de la API, pero se ve muy desordenado.
Se parece a esto:
{"data":{"id":3,"title":"Software Dev II","postDate":"2022-06-10T03:11:22.538","department":"Ingeniería", "jobType": "Mecánica y mantenimiento","managerId":"409aa832","financialId":"91","contactPerson":"Mary Herarth"...
Lo tengo en un div como este:
<div> {JSON.stringify(jobsData)} </div>y el código para obtener los datos de la API se ve así:
const getJobs = async (id) => { const data = await axios.get('api/openJobs/' + id); setJobsData(data); }No recibo errores, solo un formato feo.
¿Hay alguna manera de decirle a React que lo formatee para que sea legible?
Me gusta:
Job Title: Software Dev II Posting Date: 2021-06-10 Department: Engineering¿etc?
¡Gracias!
Si sabe cuál es el formato, simplemente puede completarlo usted mismo:
jobsData = jobsData.data; <div> <p>Job Title: {jobsData.title}</p> <p>Posting Date: {jobsData.postDate}</p> <p>Department: {jobsData.department}</p> </div>HTML cambia todos los espacios adicionales en un solo espacio. Puede envolver el texto en <pre> (que no tiene ese comportamiento):
<div> <pre>{JSON.stringify(jobsData)}</pre> </div>