How to Iterate through list of list objec in reactJs

user_18278945 0
Viewed 27

JSON:

[
{"image_id": "base64encode",
"hw": [446, 640], 
"category_id":["person", "person", "person", " frisbee"], 
"bbox": [[406, 417, 115, 210], [187, 420, 89, 189], [275, 424, 95, 272], [272, 133, 34, 22]], 
"score": [0.94813, 0.94638, 0.94348, 0.90018]}
]

React Code:

{output.map(object => (  
          <div class="img-overlay-wrap"style={{ marginLeft: "27%" }}>
         
            <img src={`data:image/png;base64,${object.image_id}`} style={{ height:`${object.hw[0]}` , width:`${object.hw[1]}`}} alt="" />
            
            <svg width={object.hw[1]} height={object.hw[0]} >
           <g>
             <rect  x={object.bbox[0][0]} y={object.bbox[0][1] - object.bbox[0][3]}  width={object.bbox[0][2]} height={object.bbox[0][3] }
           style={{stroke:"red",}} fill-opacity="0.0" />
 
           </g>
           
                </svg> 

</div>
          ))}

In that above code(in Rect tag) i can only able to get one value of bbox since i'm using bbox[0][1] i coudn't able to iterate through other values. i'm using map functions to iterate through array objects.In jsx please give me suggestion for how to iterate these kind of list of list objects.

reactjs json
1 Answers

Try this ,

{
   object.bbox.map((val,index)=>
           <rect  x={object.bbox[index][0]} y={object.bbox[index][1] - object.bbox[index][3]}  width={object.bbox[index][2]} height={object.bbox[index][3] }
           style={{stroke:"red",}} fill-opacity="0.0" /> 
   )
}

Based on your requirement you can map the inside array also . I hope you got a general idea , how to deal with such type of problem.

user_151162070
Related