CODEWITHSUNDEEP
arraysreact-native
Aoudesh01
Aoudesh01

Reputation: 189

how to fetch nested array object inside array object in 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",
  },
]

this is my json response and i want to fetch all my response object with array object and i have tried as:- 

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

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

          )}
            </View>
    )}

using item then for inside i used sub with index
but then error showsthat undefined is not an object (evaluating 'item.resultlist.map')

how to fetch this nested arrays object or something is wrong with my response json please suggest me where i am wrng? and mostly when i try to fetch the single object inside the array's object with 

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

then with console i can fetch only single object but when using this map function to fetch then its undefined

Upvotes: 1

Views: 363

Answers (3)

SDushan
SDushan

Reputation: 4631

According to the problem, your JSON array has 4 objects but only 3 of them have nested array called resultlist & 1 object hasn't.

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

That's cause error undefined is not an object (evaluating 'item.resultlist.map') because you need an array in order to used map in JS. But that object hasn't resultlist.

That is something you need to handle from the backend. If not you can filtered that object or change structure of that object by adding resultlist:[] as below.

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

Hope this helps you. Feel free for doubts

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9769

This is how you can iterate

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 data

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

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12215

The problem is your response array doesnt have the same object type throughout , like responseJson.response[1] doesnt have any key called resultlist.

So if you want to fetch and store all resultlist , there is a way like, 

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

Hope it helps. Feel ffree for doubts

Upvotes: 1

Related Questions