react/api - how to parse and map an array inside of api response

Question

I'm trying to parse and map through the array "items" inside of this api response

[
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  }
]

this is what I have tried, it just parse through the response itself but I want to parse through the array inside of this response.

this.props.items.map((item) => {
                return (
                    <Col className='' xs={12} md={4} key={item.id}>
                        <ProductItem handleOnAdd={this.dispachAddToCart.bind(this)} item={item} />
                    </Col>
                );
            })

Instead of mapping through the the whole response, I want to parse and map through the array "items" (please check the api response I attached above, "items" is a property in that object) — develop05, Sep 02 '18 at 16:17

score 0 · Answer 1 · answered Sep 02 '18 at 16:30

0

You are probably getting JSON res from your API. You can destruct items from it and then iterate over it.

render(){
const { items } = this.props.response

 items.map((item)=>{
    return (
      // do the stuff here
    )
   })

}

answered Sep 02 '18 at 16:30

Sakhi Mansoor

6,103
4
17
31

Thank you but I think this way you just iterate through the whole response. I just want to iterate through one property "items" inside of the response. – develop05 Sep 02 '18 at 17:01
It is iterating over only items. Sorry can you elaborate what you want ? – Sakhi Mansoor Sep 02 '18 at 17:02

Adeel Imran · Accepted Answer · 2018-09-02T17:45:49.413

Suppose this is your array;

const response = [
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  },
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  }
];

Then in render method do this.

render() {
   return (
      {response.map(item => {
          return (
             <div key={item.id}>
                {item.items.map(product => {
                    return (
                       <div key={product.itemId}>
                          <p>{product.name}</p>
                          <p>path of image{product.img}</p>
                       </div>
                    );
                })}
             </div>
          )
      })}
   );
}

The problem is you get an array of objects, and inside each object there is another array of objects.

score 0 · Answer 3 · edited Sep 02 '18 at 17:53

0

Do you mean you just want to parse the first item of the response array:

this.props.items[0].items.map

edited Sep 02 '18 at 17:53

Shashanth

4,151
7
32
46

answered Sep 02 '18 at 17:46

Jun Jie

1

react/api - how to parse and map an array inside of api response

3 Answers3