CODEWITHSUNDEEP
reactjs
Agha Zafeer
Agha Zafeer

Reputation: 31

How to render this JSON object in react js

{
    "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 ?

Upvotes: 3

Views: 5653

Answers (4)

Sharp Dev
Sharp Dev

Reputation: 970

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.

Upvotes: 1

stefantut
stefantut

Reputation: 71

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.

Upvotes: 0

zain ul din
zain ul din

Reputation: 619

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

Upvotes: 1

vasek
vasek

Reputation: 106

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>

Upvotes: 4

Related Questions