Как получить вложенный объект массива внутри объекта массива в реагировать родной - PullRequest
Новая
       5

Как получить вложенный объект массива внутри объекта массива в реагировать родной

1 голос
/ 23 января 2020 
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>
    )}

используя элемент, а затем внутри я использовал sub с index
но затем появляется сообщение об ошибке undefined is not an object (evaluating 'item.resultlist.map')

как получить этот объект вложенных массивов или что-то не так с моим ответом json подскажите, пожалуйста, где я нахожусь? и в основном, когда я пытаюсь получить один объект внутри объекта массива с помощью 

let products = responseJson.response[0].resultlist[3];

, затем с консоли я могу получить только один объект, но при использовании этой функции карты для извлечения его неопределенный

Ответы [ 3 ]

1 голос
/ 23 января 2020

Проблема в том, что ваш массив ответов не имеет одинаковый тип объекта, как в ответе Json .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>
    ))

Надеюсь, это поможет. Чувствуй себя свободным от сомнений

1 голос
/ 24 января 2020

В соответствии с проблемой, в вашем массиве 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') потому что вам нужен массив, чтобы использовать map в JS. Но у этого объекта нет 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
  }
});

Надеюсь, это поможет вам. Не стесняйтесь сомнений

1 голос
/ 23 января 2020

Вот как вы можете перебирать 

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",
  },
]
  }
...