在反應中返回嵌套循環內的所有對象

Question

我想返回嵌套循環中的所有對象

const data = [{ id:1, products:[{id:1, name:'apple'}, {id:2, name:'orange'}] },
{id:2, products:[{id:3, name:'grapes'}, {id:4, name:'banana'},  {id:5, name:'dragonFruit'}] 
}]
 let result = data.map(item=>{
 item?.products?.map(row=> return row) })
console.log(result )

結果應該是：

[{id: 1, name: 'apple'}
{id: 2, name: 'orange'}
{id: 3, name: 'grapes'}
{id: 4, name: 'banana'}
{id: 5, name: 'dragonFruit'}
]

Answer 1

 const data = [{ id:1, products:[{id:1, name:'apple'}, {id:2, name:'orange'}] }, {id:2, products:[{id:3, name:'grapes'}, {id:4, name:'banana'}, {id:5, name:'dragonFruit'}] }] let result = data.map(item=>{ let res = item.products.map((val) =>{ return val }) return res }) console.log(result)

檢查上面的代碼片段，這里內部映射函數將值返回到外部映射，並且從外部映射函數返回結果

Answer 2

可以將flatMap與map一起使用。

let result = data.flatMap(({products})=> 
    products.map(prd=> ({...prd })))

讓我舉個例子：

 const data = [ { id:1, products:[ {id:1, name:'apple'}, {id:2, name:'orange'} ] }, {id:2, products:[ {id:3, name:'grapes'}, {id:4, name:'banana'}, {id:5, name:'dragonFruit'} ] } ] let result = data.flatMap(({products})=> products.map(prd=> ({ ...prd }))) console.log(result)

Answer 3

您可以使用flatMap 。 在此處閱讀有關它的更多信息

 const data = [ { id:1, products:[{id:1, name:'apple'}, {id:2, name:'orange'}] }, { id:2, products:[{id:3, name:'grapes'}, {id:4, name:'banana'}, {id:5, name:'dragonFruit'}] } ]; const flatResult = data.flatMap(({products})=> products); console.log(flatResult)

以上將返回輸出為

[
  {
    "id": 1,
    "name": "apple"
  },
  {
    "id": 2,
    "name": "orange"
  },
  {
    "id": 3,
    "name": "grapes"
  },
  {
    "id": 4,
    "name": "banana"
  },
  {
    "id": 5,
    "name": "dragonFruit"
  }
]

Answer 4

您可以使用嵌套循環來執行此操作，首先map data ，然后映射products 。

 const data = [ { id: 1, products: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, ], }, { id: 2, products: [ { id: 3, name: "grapes" }, { id: 4, name: "banana" }, { id: 5, name: "dragonFruit" }, ], }, ]; function App() { return ( <ul> {data.map(({ products }) => products.map((p) => <li key={p.id}>{p.name}</li>) )} </ul> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>