How to map through an object with array of object

Question

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

user8018716 · Accepted Answer · 2022-02-16 16:19:50Z

1

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

answered Feb 16, 2022 at 16:19

user8018716

Sign up to request clarification or add additional context in comments.

7 Comments

Ardee Over a year ago

I used this as the obj value {"items":[{"id":"61f5530ffa13c013c514cc5f","title":"Shrimps"}],"isEmpty":false,"total":1500} which is gotten from my localstorage, but am still getting 'TypeError: Cannot read properties of undefined (reading 'map')'

user8018716 Over a year ago

The error you get means that the object you call map on is not defined. So check the localstorage if you are getting the correct data.

Ardee Over a year ago

Thank you for your response. When i console.log my localstorage i get the object {"items":[{"id":"61f5530ffa13c013c514cc5f","title":"Shrimps"}],"isEmpty":false,"total":1500}, and when I use the hardcoded object value in my code it works as expected, but when i dynamically get the object value using JSON.parse(localStorage.getItem('shop')!); , it keeps showing 'TypeError: Cannot read properties of undefined (reading 'map')' . Do you know what could be the problem?

user8018716 Over a year ago

How do you store your object in localStorage? You should also show where and how you retrieve the value in react.

Ardee Over a year ago

Thank you for your tip, I found out that the issue is from how I saved the values to localStorage.

|

Laura Hirtop · Accepted Answer · 2022-02-16 16:20:34Z

1

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

answered Feb 16, 2022 at 16:20

Laura Hirtop

564 bronze badges

Comments

abinash phulkonwar · Accepted Answer · 2022-02-16 16:24:58Z

0

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

edited Feb 16, 2022 at 16:24

answered Feb 16, 2022 at 16:17

abinash phulkonwar

201 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to map through an object with array of object

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related