реагировать / api - как проанализировать и отобразить массив внутри ответа API - PullRequest
Новая
       45

реагировать / api - как проанализировать и отобразить массив внутри ответа API

0 голосов
/ 02 сентября 2018

Я пытаюсь проанализировать и отобразить массив "items" внутри этого ответа API 

[
  {
    "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.props.items.map((item) => {
                return (
                    <Col className='' xs={12} md={4} key={item.id}>
                        <ProductItem handleOnAdd={this.dispachAddToCart.bind(this)} item={item} />
                    </Col>
                );
            })

Ответы [ 3 ]

0 голосов
/ 02 сентября 2018

Предположим, это ваш массив; 

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": ""
      }
    ]
  }
];

Затем в методе render сделайте это. 

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

Проблема в том, что вы получаете массив объектов, а внутри каждого объекта есть еще один массив объектов.

0 голосов
/ 02 сентября 2018

Вы имеете в виду, что вы просто хотите проанализировать первый элемент массива ответов: 

this.props.items[0].items.map
0 голосов
/ 02 сентября 2018

Возможно, вы получаете разрешение JSON из вашего API. Вы можете уничтожить items из него и затем выполнить итерацию по нему. 

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

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

}
...