Loop in javascript from list

Question

I have my api which is returning response like this :

"imagePath": "path1",

I have JS code like this below :

<div className="flexAlignCenterJustifyCenter">
  {event.imagePath ? (
    <img
      src={event.imagePath}
      onError={(event) => event.target.src = NoImage}
    />
  ) : (
    ""
  )}
</div>

So properly it is showing the image,

but now I changed my api to give the output as a list which is :

"imagePath": ["path1","path2"]

now the NoImage icon is showing, and I want to display all the images in the list (imagePath) , I am new to javascript can anyone pls help me out?

You can use imagePath.forEach((path)=>{ //you have the image path here }) to loop through each path and set them in the image elements. — Rifat Bin Reza
– Rifat Bin Reza, Commented Feb 10, 2021 at 9:39

Bas Wagenmaker · Accepted Answer · 2021-02-10 09:42:03Z

2

As your response is now an array, you should iterate through it, for example with .map:

<div className="flexAlignCenterJustifyCenter">
{ 
  event.map((data, index) => {
    return <img key={index} src={data.imagePath} onError={(data)=>{data.target.src=NoImage}} /> 
  }
}
</div>

answered Feb 10, 2021 at 9:42

Bas Wagenmaker

2231 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

Loop in javascript from list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related