How to Iterate through list of list objec in reactJs-CodePudding

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

CodePudding user response：

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.