How to map object of nested arrays in react native

Question

I have a data.json file :

{
    "category1":[
    {"name":"XYZ","price":100,"instock":true},
    {"name":"ABC","price":934,"instock":false},
    {"name":"OTR","price":945,"instock":true},
    {"name":"SLG","price":343,"instock":true},
    {"name":"KGN","price":342,"instock":true},
    {"name":"GDS","price":234,"instock":true},
    {"name":"KNL","price":934,"instock":true},
    {"name":"GLM","price":320,"instock":true},
    {"name":"DKF","price":394,"instock":false},
    {"name":"VFS","price":854,"instock":true}
    ],
    "category2":[
    {"name":"NA","price":124,"instock":true},
    {"name":"DS","price":953,"instock":true},
    {"name":"HF","price":100,"instock":true},
    {"name":"FJ","price":583,"instock":true},
    {"name":"LS","price":945,"instock":false},
    {"name":"TR","price":394,"instock":true},
    {"name":"PD","price":35,"instock":true},
    {"name":"AL","price":125,"instock":true},
    {"name":"TK","price":129,"instock":true},
    {"name":"PG","price":294,"instock":true}
    ]
}

I am storing all these data in my reducer of redux and then using hooks to store in my state:

const [items, setItems] = useState({});
setItems(createMenuReducer.data.menu)
console.log(items);

when console my items I get the following output:

{cat1: Array(10), cat2: Array(10), default: {…}}
cat1: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
cat2: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
default: {cat1: Array(10), cat2: Array(10)}
__proto__: Object

I want to map through this items and display the name and price on the screen.

{
    createMenuReducer &&
    items?.map((item, index) => {
        return (
            <Text>item</Text>
        );
    })
}

But I am getting error: items.map is not a function.

I know my way of mapping is wrong, But I always gets confused when mapping something. Please someone explain me how I can display name and price with their category names i.e. category1 and category2.

Albin wärme · Accepted Answer · 2021-04-10 19:17:09Z

2

The problem is that .map is a function of the array object and you are currently handling a javascript object with key pair values in your items object.

The easiest way to go about doing what you are trying to do would be to say

for(let key in items){
    items[key].map( item => {
       console.log(item.name + " : " + item.price);
    })
}

answered Apr 10, 2021 at 19:17

Albin wärme

2611 silver badge15 bronze badges

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

3 Comments

pratteek shaurya Over a year ago

Both item.name and item.price is coming in console, but when everything is printed there is an error message items[key].map is not a function

Albin wärme Over a year ago

Most likely it is caused by the default key. Looking at the case at hand i think the easiest way would be if you added if( Array.isArray( items[key] )){...}. around the map statement

pratteek shaurya Over a year ago

There is no output in console

Kapobajza · Accepted Answer · 2021-04-10 22:39:01Z

Since you can't use Array.map on objects, you'll first have to transform that data. Object.values could be useful in your case. You could use it to get all of the values from the keys in your object and then concatenate the arrays into a single one using Array.reduce. Here's an example of how it can be done:

const data = {
  "category1": [{
      "name": "XYZ",
      "price": 100,
      "instock": true
    },
    {
      "name": "ABC",
      "price": 934,
      "instock": false
    },
    {
      "name": "OTR",
      "price": 945,
      "instock": true
    },
    {
      "name": "SLG",
      "price": 343,
      "instock": true
    },
    {
      "name": "KGN",
      "price": 342,
      "instock": true
    },
    {
      "name": "GDS",
      "price": 234,
      "instock": true
    },
    {
      "name": "KNL",
      "price": 934,
      "instock": true
    },
    {
      "name": "GLM",
      "price": 320,
      "instock": true
    },
    {
      "name": "DKF",
      "price": 394,
      "instock": false
    },
    {
      "name": "VFS",
      "price": 854,
      "instock": true
    }
  ],
  "category2": [{
      "name": "NA",
      "price": 124,
      "instock": true
    },
    {
      "name": "DS",
      "price": 953,
      "instock": true
    },
    {
      "name": "HF",
      "price": 100,
      "instock": true
    },
    {
      "name": "FJ",
      "price": 583,
      "instock": true
    },
    {
      "name": "LS",
      "price": 945,
      "instock": false
    },
    {
      "name": "TR",
      "price": 394,
      "instock": true
    },
    {
      "name": "PD",
      "price": 35,
      "instock": true
    },
    {
      "name": "AL",
      "price": 125,
      "instock": true
    },
    {
      "name": "TK",
      "price": 129,
      "instock": true
    },
    {
      "name": "PG",
      "price": 294,
      "instock": true
    }
  ]
};

const final = Object
  .values(data)
  .reduce((arr, nextArr) => [...arr, ...nextArr], []);

console.log(final);

Collectives™ on Stack Overflow

How to map object of nested arrays in react native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related