How to map through an object with array of object-CodePudding

I have an object which has an array of objects and 2 other key-value pairs. I get stuck on how to display the object values. I got an error showing 'TypeError: obj.map is not a function.

This is my code

import React from 'react'

function MapObj() {

    const obj = {
        items: [
          {
          id: 1,
          title: 'Pizza'
        },
        {
         id: 2,
         title: 'Hot-Dog'
       }
       ],
        total: 200,
        isEmpty: false
      };

  const mappedObj = obj.map(item => {
      return (
       <>
         <div key={item.items.id}>
          <h2>{item.items.title}</h2>
         </div>
        <p>{item.total}</p>
        <p>{item.isEmpty}</p>
       </>
      )
  })

  return (
    <div style={{textAlign: 'center', color: 'maroon'}}>
        {mappedObj}
    </div>
  )
}

export default MapObj

CodePudding user response：

The function map does not exist on an object but only on an array.

Try to use map on object.items instead on the object directly. Also you can access the property using item.id for example directly.

Like this:

import React from 'react'

function MapObj() {

    const obj = {
        items: [
          {
          id: 1,
          title: 'Pizza'
        },
        {
         id: 2,
         title: 'Hot-Dog'
       }
       ],
        total: 200,
        isEmpty: false
      };

  const mappedObj = obj.items.map(item => {
      return (
       <>
         <div key={item.id}>
          <h2>{item.title}</h2>
         </div>
        <p>{obj.total}</p>
        <p>{obj.isEmpty}</p>
       </>
      )
  })

  return (
    <div style={{textAlign: 'center', color: 'maroon'}}>
        {mappedObj}
    </div>
  )
}

export default MapObj

CodePudding user response：

You cannot apply the method map on an object. Try applying it on the array inside the object:

const mappedObj = obj.items.map(item => {
      return (
       <>
         <div key={item.id}>
          <h2>{item.title}</h2>
         </div>
        <p>{obj.total}</p>
        <p>{obj.isEmpty}</p>
       </>
      )
  })

CodePudding user response：

Object don't have map

You can use this approach :

const mappedObj = obj.items.map(item => {
      return (
       <>
         <div key={item.id}>
          <h2>{item.title}</h2>
         </div>
       </>
      )

return (
    <div style={{textAlign: 'center', color: 'maroon'}}>
        {mappedObj}

        <p>{obj.items.total}</p>
        <p>{obj.items.isEmpty}</p>
    </div>
  )

And you can also loop the object with for in loop