How to render this JSON object in react js-CodePudding

{
"code": "00100300",
"lastupdate": "08/Mar/2022 16:55",
"name": "080",
"ordernumber": "4365873",
"projectdescription": "LVB - Smart Device - CIC 833",
"referencecode": null,
"status": "In Use",
"statuscolor": "GREEN",
"workcenters": [
{
"workcenterCode": "00200500",
"workcenterColor": "GREEN",
"workcenterName": "Manual Pack_080 (Dosepak ®)",
"workcenterStatus": "In Use",
"job": {
"jobUid": 135355,
"jobDescription": "4: [CIC833PROD2]1 X Dosepak ® Inner (Wallet) -> Dosepak ® (PBOEL = Not Classi...",
"jobProgress": "5/30 ( 17% )",
"jobStatus": "In Progress",
"jobStatuscolor": "GREEN"
}
}
],
"errorDescription": null
}

I am getting this JSON object from an API call.....but unable to render this in react js. I want to display the whole object on the website ...How should I access all of its attributes ?

CodePudding user response：

You need to stringify the json using JSON object in javascript and then put it to idealy pre tag in html like this

const stringObj = JSON.stringify(yourObject);

<pre>{stringObj}</pre>

CodePudding user response：

first, you need to store this JSON data in some variable const jsonData = JSON.stringify(yourJSONdata) then you can display it by accessing properties and mapping over it on it. have a look at this code

const jsonData = JSON.stringify(yourJSONdata)

return(

  // "code": "00100300",
  <p> {jsonData.code} </p> // so on

  // in case you have array do, map over it
  {jsonData && jsonData.map ( (data , idx) => 
       // render it ...
       
       //"workcenters": [ JSON DATA .. ]
       data.workcenters.map ( (ele , idx) =>{
         // render ..

         // "job" : {...}
         const jobData = ele.job
         // render jobData ..
       )}
  )}
);

CodePudding user response：

function RenderApiInput({apiResponseObj}){
    const {code, lastupdate, name, ordernumber, projectdescription,
        referencecode, status, statuscolor, workcenters,
        errorDescription} = apiResponseObj; //pulling out attributes here
    return (
        <div className="api-response">
            <p>{code}</p>
            <p>{lastupdate}</p>
            <p>{name}</p>
            <p>{ordernumber}</p>
            <p>{projectdescription}</p>
            <p>{referencecode}</p>
            <p>{status}</p>
            <p>{status}</p>
            {workcenter.map(v=>(
                <div className="work-center">
                    <p>{v["workcenterCode"]}</p>
                    <p>{v["workcenterColor"]}</p>
                    //... render the workcenter attributes just like this one for basic example
                    <div>
                        <p>{v["job"]["jobUid"]}</p>
                        <p>{v["job"]["jobDescription"]}</p>
                        //... render the jobs accordingly if you want it nested as you mentioned in the comment.
                    </div>
                </div>
            ))}
            <p></p>
        </div>
    );
}

export default RenderApiInput;

in Whatever react component you want to render this apiReponse you can use this like so:

<RenderApiInput apiResponseObj={responseObj} />

Because this is basic javascript (accessing a javascript object elements and inner elements I recommend you read this, this and this. However if you are able to make api requests, I would assume you already know the first link I shared.