如何遍历 javascript 中数组内的嵌套 object

Question

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

Answer 1

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

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

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>

Answer 4

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