React Typescript: api data to array map

Question

I have this array data from api and I want to make it in react tsx file using map function

{
   "data":{
      "cart":{
         "1":{
            "product_id":1,
            "name":"Product 1",
            "quantity":1,
            "price":"1.00"
         },
         "2":{
            "product_id":2,
            "name":"Product 2",
            "quantity":1,
            "price":"1.00"
         }
      }
   }
}

React Typescript Code (but not working):

(data.cart.map((item:any, key:any) => (
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
)))

I want to to fix the react tsx code

What's your error message?

Jake Worth
– Jake Worth

2021-07-16 02:11:17 +00:00
Commented Jul 16, 2021 at 2:11 — Jake Worth
– Jake Worth, Commented Jul 16, 2021 at 2:11
console log: TypeError: e.map is not a function

bennajah
– bennajah

2021-07-16 02:13:24 +00:00
Commented Jul 16, 2021 at 2:13 — bennajah
– bennajah, Commented Jul 16, 2021 at 2:13

Chirag Rupani · Accepted Answer · 2021-07-16 02:26:04Z

1

The data is nested inside object within cart. You can use Object.Keys to access keys like 1, 2, 3 ...

Object.keys(data.cart[0]).map((key) => {
let item = data.cart[0][key];
return (
<React.Fragment key={key}>
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
</React.Fragment>
)
});

Based on revised question, since you removed array:

Object.keys(data.cart).map((key) => {
let item = data.cart[key];
return (
<React.Fragment key={key}>
   <p>{item.product_id}</p>
   <p>{item.name}</p>
   <p>{item.quantity}</p>
   <p>{item.price}</p>
</React.Fragment>
)
});

edited Jul 16, 2021 at 2:26

answered Jul 16, 2021 at 2:17

Chirag Rupani

1,7152 gold badges18 silver badges37 bronze badges

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

1 Comment

bennajah Over a year ago

original api data: pastebin.com/LDYHF7BU original react typescript code: pastebin.com/61yvU9Pb

Collectives™ on Stack Overflow

React Typescript: api data to array map

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related