I've been trying to get data from an api and display it in my React component.
I've finally gotten to a point where it's almost working! I am getting the data from the API but it looks really messy.
It looks like this:
{"data":{"id":3,"title":"Software Dev II","postDate":"2022-06-10T03:11:22.538","department":"Engineering", "jobType":"Mechanical & Maintenance","managerId":"409aa832","financialId":"91","contactPerson":"Mary Herarth"...
I have it in a div like this:
<div>
{JSON.stringify(jobsData)}
</div>
and the code to get the api data looks like this:
const getJobs = async (id) => {
const data = await axios.get('api/openJobs/' + id);
setJobsData(data);
}
I am getting no errors, just ugly formatting.
Is there a way to tell React to format it so it's readable?
Like:
Job Title: Software Dev II
Posting Date: 2021-06-10
Department: Engineering
etc?
Thanks!
If you know what the format is, you can simply fill it in yourself:
jobsData = jobsData.data;
<div>
<p>Job Title: {jobsData.title}</p>
<p>Posting Date: {jobsData.postDate}</p>
<p>Department: {jobsData.department}</p>
</div>
HTML changes all extra spaces into a single space. You can wrap the text in <pre> (which doesn't have such behavior):
<div>
<pre>{JSON.stringify(jobsData)}</pre>
</div>