Trying to map with Objects.key.map() without success

Question

I'm trying to print my cart status in a JSX table without success.

I have this Object output in state Chrome Console:

{
  "cartItems": {
    "5": {
      "id": 5,
      "name": "Aut assumenda.",
      "price": 526,
      "quantity": 1,
      "attributes": [],
      "conditions": [],
      "associatedModel": {
        "id": 5,
        "name": "Aut assumenda.",
        "description": "Nihil quisquam hic voluptatem consequuntur nemo et amet rerum.",
        "price": "526",
        "created_at": "2020-11-25T22:43:32.000000Z",
        "updated_at": "2020-11-25T22:43:32.000000Z"
      }
    },
    "6": {
      "id": 6,
      "name": "Non est consequatur.",
      "price": 453,
      "quantity": 1,
      "attributes": [],
      "conditions": [],
      "associatedModel": {
        "id": 6,
        "name": "Non est consequatur.",
        "description": "Facilis itaque ut reiciendis blanditiis maxime corrupti voluptatem.",
        "price": "453",
        "created_at": "2020-11-25T22:43:32.000000Z",
        "updated_at": "2020-11-25T22:43:32.000000Z"
      }
    }
  }
}

I want to print the object properties with Object.keys.map() method like so:

{
    Object.keys(cartItems).map((item, i) => {
        return ( <
            tr key = {i} >
            <td scope="row">{item.name}</td>
            <td>{item.price}</td>
            <td>{item.quantity}</td>
            </tr>
        );
    })
}

Yet I cannot correctly print my cart table. I have been playing around with console log and I can't find the solution for this. It does surely have a simplem solution but I'm new to Javascript it is not evident for me in relation to my expertise.

If I console.log(item) inside the map method I'd get the object names which in this case are 5and 6.

Thank you all

You are trying to loop only the keys. Just try `cartItems.map((item, i) => {`. — SelvaS, Dec 14 '20 at 20:14
I'm not sure, but you can't use Object.keys inside the render function — deleuterio, Dec 14 '20 at 20:15
Thanks, it does gives more options to solving my question. However, @Passersby answer was the shortest solution without having to rewrite all the code. I don't know why people voted it down. — Fer Toasted, Dec 15 '20 at 15:26

score -2 · Accepted Answer · answered Dec 14 '20 at 20:14

-2

I think you are looking for Object.values(cartItems)

{Object.values(cartItems).map((cartItem, i) => {
                        return (
                            <tr key={i}>
                                <td scope="row">{cartItem.name}</td>
                                <td>{cartItem.price}</td>
                                <td>{cartItem.quantity}</td>
                            </tr>
                        );
                    })}

answered Dec 14 '20 at 20:14

Passersby

1,092
9
11

This was the correct anwser. I wasn't aware of the `value()` method which is self explicative. – Fer Toasted Dec 14 '20 at 20:47

score -2 · Answer 2 · answered Dec 14 '20 at 20:16

Object.keys returns, as it name states, the keys of the object you pass as an argument. Since what you need are the key-value pairs, you should do the following:

{Object.keys(cartItems).map(i => {
                        const item = cartItems[i];
                        return (
                            <tr key={i}>
                                <td scope="row">{item.name}</td>
                                <td>{item.price}</td>
                                <td>{item.quantity}</td>
                            </tr>
                        );
                    })}

Trying to map with Objects.key.map() without success

2 Answers2