如何在React Native中获取数组对象内的嵌套数组对象

时间：2020-01-23 06:17:56

标签： arrays react-native 

Array [
  Object {
    "resultlist": Array [
      Object {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa F1",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "category_id": 20,
        "img": "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphone",
        "type": "category",
      },
      Object {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifier",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbank",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 0,
    "status": true,
    "type": "product",
  },
  Object {
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
  },
  Object {
    "resultlist": Array [
      Object {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa A1 Black",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "category_id": 20,
        "img": "https://www.act.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphones",
        "type": "category",
      },
      Object {
        "img": "https://www.act.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifiers",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbanks",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 2,
    "status": true,
    "type": "product",
  },
  Object {
    "resultlist": Array [
      Object {
        "image": "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
        "link": "",
        "title": "slider1",
      },
      Object {
        "image": "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
        "link": "",
        "title": "slider2",
      },
    ],
    "sort_order": 3,
    "status": true,
    "type": "slider",
  },
]

这是我的json响应，我想用数组对象获取所有响应对象，而我尝​​试过：-

   {data.map((item, i) =>
        <View>
        <Text key={i}>{item.type}</Text>

        {
          item.resultlist.map((sub,index)=>
            <Text key={index}>sub.name</Text>

          )}
            </View>
    )}

使用项，然后在内部使用带有索引的子项
但是然后错误表明 undefined is not an object (evaluating 'item.resultlist.map')

如何获取此嵌套数组对象或我的响应json出了点问题，请告诉我我在哪里？ 而且主要是当我尝试使用

获取数组对象中的单个对象时 
let products = responseJson.response[0].resultlist[3];

然后使用控制台，我只能获取单个对象，但是当使用此map函数获取其未定义的对象时

3 个答案:

答案 0 :(得分：1)

这是您可以迭代的方式

render() {
    const {array} = this.state;
    return (
      <View style={styles.container}>
       {array[0].resultlist.map((item,index)=>
        <View key={index}>
        <Text>{item.name}</Text>
        </View>
       )}
      </View>
    );
  }

状态数据

  state={
    array:[{
    "resultlist": [
       {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa F1",
        "product_id": 87,
        "type": "product",
      },
       {
        "category_id": 20,
        "img": "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphone",
        "type": "category",
      },
       {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifier",
        "product_id": 87,
        "type": "product",
      },
       {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbank",
        "product_id": 87,
        "type": "product",
      }
    ],
    "sort_order": 0,
    "status": true,
    "type": "product",
  },
   {
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
  },
   {
    "resultlist": [
       {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa A1 Black",
        "product_id": 87,
        "type": "product",
      },
       {
        "category_id": 20,
        "img": "https://www.act.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphones",
        "type": "category",
      },
       {
        "img": "https://www.act.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifiers",
        "product_id": 87,
        "type": "product",
      },
       {
        "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbanks",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 2,
    "status": true,
    "type": "product",
  },
   {
    "resultlist": [
       {
        "image": "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
        "link": "",
        "title": "slider1",
      },
       {
        "image": "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
        "link": "",
        "title": "slider2",
      },
    ],
    "sort_order": 3,
    "status": true,
    "type": "slider",
  },
]
  }

答案 1 :(得分：1)

问题是您的响应数组在整个过程中都没有相同的对象类型，例如responseJson.response [1]没有任何名为resultlist的键。

因此，如果您要获取并存储所有结果列表，则可以使用

let arrayOfData = [];
  {data.map((item, i) =>{

    if('resultlist' in item){
      item['resultlist].map((eachObject) => {
        arrayOfData.push(eachObject);
      })
    }
  }

    )};

    Now do this after getting arrayOfData , plot as you want 

    arrayOfData.map((data) => (
      <Text>{data.name}</Text>
    ))

希望有帮助。感到疑惑自由

答案 2 :(得分：1)

根据该问题，您的JSON数组有4个对象，但是只有3个对象具有称为resultlist的嵌套数组，而1个对象则没有。

{
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
}

这会导致错误undefined is not an object (evaluating 'item.resultlist.map')，因为您需要一个数组才能在JS中使用map。但是该对象还没有resultlist。

这是您需要从后端处理的事情。如果没有，您可以通过添加resultlist:[]来过滤该对象或更改该对象的结构，如下所示。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  state = {
    data: [
      {
        resultlist: [
          {
            img:
              "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
            name: "Mifa F1",
            product_id: 87,
            type: "product"
          },
          {
            category_id: 20,
            img: "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
            name: "Earphone",
            type: "category"
          },
          {
            img: "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
            name: "Air Purifier",
            product_id: 87,
            type: "product"
          },
          {
            img:
              "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
            name: "Powerbank",
            product_id: 87,
            type: "product"
          }
        ],
        sort_order: 0,
        status: true,
        type: "product"
      },
      {
        img: "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        product_id: 187,
        sort_order: 1,
        status: true,
        type: "middleimage"
      },
      {
        resultlist: [
          {
            img:
              "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
            name: "Mifa A1 Black",
            product_id: 87,
            type: "product"
          },
          {
            category_id: 20,
            img: "https://www.act.com/image/catalog/cmsblock/hgb5.png",
            name: "Earphones",
            type: "category"
          },
          {
            img: "https://www.act.com/image/catalog/cmsblock/air.gif",
            name: "Air Purifiers",
            product_id: 87,
            type: "product"
          },
          {
            img: "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
            name: "Powerbanks",
            product_id: 87,
            type: "product"
          }
        ],
        sort_order: 2,
        status: true,
        type: "product"
      },
      {
        resultlist: [
          {
            image:
              "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
            link: "",
            title: "slider1"
          },
          {
            image:
              "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
            link: "",
            title: "slider2"
          }
        ],
        sort_order: 3,
        status: true,
        type: "slider"
      }
    ]
  };

  render() {
    let newArray = this.state.data.filter(obj => obj.resultlist);
    return (
      <View style={styles.container}>
        {newArray.map((item, i) => (
          <View>
            <Text key={i} style={{color: 'red'}}>{item.type}</Text>
            {item.resultlist.map((sub, index) => (
              <Text key={index}>{sub.name}</Text>
            ))}
          </View>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ecf0f1",
    padding: 8
  }
});

希望这对您有所帮助。随时有疑问

相关问题
最新问题