如何在本机反应中嵌套 arrays 的 map object

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 ie category1 and category2 .

Answer 1

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

Answer 2

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