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

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 1.png",
        imageUrl2:
          "img/Album 2.png",
        imageUrl3:
          "img/Album 3.png",
        imageUrl4:
          "img/Album 4.png",
    },
    },

    {
      id: "p2",
      title: "Black and white Colors",
      price: 50,
      imageUrl: {
        imageUrl4:
          "img/Album 5.png",
        imageUrl1:
          "img/Album 6.png",
        imageUrl2:
          "img/Album 7.png",
        imageUrl3:
          "img/Album 8.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>
 });

CodePudding user response：

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

for example :

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

CodePudding user response：

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

CodePudding user response：

Try this :

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.productsArr = [
      {
        id: "p1",
        title: "Colors",
        price: 100,
        imageUrl: {
          imageUrl1:
          "img/Album 1.png",
          imageUrl2:
          "img/Album 2.png",
          imageUrl3:
          "img/Album 3.png",
          imageUrl4:
          "img/Album 4.png",
        }
      },
      {
        id: "p2",
        title: "Black and white Colors",
        price: 50,
        imageUrl: {
          imageUrl4:
          "img/Album 5.png",
          imageUrl1:
          "img/Album 6.png",
          imageUrl2:
          "img/Album 7.png",
          imageUrl3:
          "img/Album 8.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>

CodePudding user response：

const product = this.productsArr.map((item) => {
  return Object.entries(item.imageUrl).map((key) => {
    return {
      imgUrl : key[1]
    };
  });
});
 console.log(product[0]);
// this will give array of imgURL of product[0]

try this out