How to render this JSON object in react js

Question

{
    "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.
To be clear I would like it rendered with a structure like this:
|code,lastupdate,name,ordernumber...|
____|workcenters[0] (workcenterCode, workcenterColor...|
________|job (jobUid, jobDescription, jobProgress, jobStatus, jobStatuscolor)|
... I want to display the whole object on the website ...How should I access all of its attributes ?

Well it depends how you want it displayed... if you are parsing this json into a object then you can access the elements as you would a normal object. If so then render it however you like (using react inline variables most likely). Otherwise if you just want to display this JSON as you have here. you can litterally inject this JSON object into it using <div>{JSON.stringify(myApiResponse)}</div>. Can you please clarify your question. — Sharp Dev
– Sharp Dev, Commented Mar 16, 2022 at 6:58
Actually according to the JSON, 3 objects are there .....First object after that the 2nd workcenters that has ManyToOne relation with the first object and then the 3rd object Jobs that has ManyToOne relation with the workcenters. So I want to display the first object and inside it the workcenters related to it and inside the workcenters I want to display the jobs related to it. — Agha Zafeer
– Agha Zafeer, Commented Mar 16, 2022 at 7:04

vasek · Accepted Answer · 2022-03-16 06:57:00Z

4

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>

answered Mar 16, 2022 at 6:57

vasek

1061 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zain ul din · Accepted Answer · 2022-03-16 07:24:52Z

1

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 ..
       )}
  )}
);

edited Mar 16, 2022 at 7:24

answered Mar 16, 2022 at 7:02

zain ul din

1

2 Comments

Agha Zafeer Over a year ago

Actually according to the JSON, 3 objects are there .....First object and after that the 2nd object which is workcenters that has ManyToOne relation with the first object and then the 3rd object Jobs that has ManyToOne relation with the workcenters. So I want to display the first object and inside it the workcenters related to it and inside the workcenters I want to display the jobs related to it.

zain ul din Over a year ago

the answer has been updated check this out

Sharp Dev · Accepted Answer · 2022-03-17 16:53:13Z

1

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>
            {workcenters.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.

edited Mar 17, 2022 at 16:53

answered Mar 16, 2022 at 7:37

Sharp Dev

1,0701 gold badge10 silver badges27 bronze badges

4 Comments

jsN00b Over a year ago

May be consider this: const {workcenter, ...rest} = apiResponseObj;. Then within the JSX:

<div className="api-response"><div>{Object.values(rest).map(el => (<p>{el}</p>))}</div><div>{workcenter.map(....)}</div></div>

Agha Zafeer Over a year ago

Uncaught TypeError: Cannot read properties of undefined (reading 'map')...getting this error

jsN00b Over a year ago

Just to confirm: workcenter.map on the above answer has a typo. It needs to be workcenters.map. Did you manage to change the variable name?

Sharp Dev Over a year ago

Ah yes, fixed that typo, that is why @AghaZafeer is getting undefined error on the 'map'.

stefantut · Accepted Answer · 2022-03-16 15:13:26Z

0

If you want to render it first you will have to stringify your data -> JSON.stringify(apiResponse), but if you are looking just to display it as it is you could use react-json-pretty dependency.

answered Mar 16, 2022 at 15:13

stefantut

711 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to render this JSON object in react js

4 Answers 4

Comments

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related