Question

0

39

Views

how to iterate through nested object which is inside an array in javascript

I want to iterate through imageUrl and keep each element inside li tag. I'm fetching only one element based on some condition, in the array then I want to iterate through all the images my array

const productsArr = [
    {
      id: "p1",
      title: "Colors",
      price: 100,
      imageUrl: {
        imageUrl1:
          "img/Album%201.png",
        imageUrl2:
          "img/Album%202.png",
        imageUrl3:
          "img/Album%203.png",
        imageUrl4:
          "img/Album%204.png",
    },
    },

    {
      id: "p2",
      title: "Black and white Colors",
      price: 50,
      imageUrl: {
        imageUrl4:
          "img/Album%205.png",
        imageUrl1:
          "img/Album%206.png",
        imageUrl2:
          "img/Album%207.png",
        imageUrl3:
          "img/Album%208.png",
      },
    },]

code to iterate through the array. I think I should not use map here but I could not come up with the solution.

console.log(product);
 const productImage= product[0].imageUrl.map(element => {
   return <li>{<img src={element} alt={product[0].title}/>}</li>
 });

3 months ago ·

Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-06-30T09:25:28.749Z

just iterate through array using array methods and call the nested objects using dot natation

for example :

productsArr.map(x =>{
  x.imageUrl.imageUrl1)

Answer 2 · 2022-06-30T09:25:28.759Z

You can loop through the productsArr and then use Object.values to create an array of values from imageUrl object and iterate it through it to render li with image.

productsArr.map((item)=>{
  return Object.values(item.imageUrl).map((imgUrl)=> <li><img src={imgUrl} alt={item.title}/></li>)
})

Answer 3 · 2022-06-30T09:25:28.767Z

Try this :

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.productsArr = [
      {
        id: "p1",
        title: "Colors",
        price: 100,
        imageUrl: {
          imageUrl1:
          "img/Album%201.png",
          imageUrl2:
          "img/Album%202.png",
          imageUrl3:
          "img/Album%203.png",
          imageUrl4:
          "img/Album%204.png",
        }
      },
      {
        id: "p2",
        title: "Black and white Colors",
        price: 50,
        imageUrl: {
          imageUrl4:
          "img/Album%205.png",
          imageUrl1:
          "img/Album%206.png",
          imageUrl2:
          "img/Album%207.png",
          imageUrl3:
          "img/Album%208.png",
        }
      }]
  }

  render() {
    return (
      <div>
          {this.productsArr.map((obj) => {
            return Object.keys(obj.imageUrl).map((item) => (
              <li>{ obj.imageUrl[item] }</li>
            ));
          })}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

#app {
  padding: 20px;
}
li {
  margin: 8px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>