如何在React Native中获取数组对象内的嵌套数组对象 [英] 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",
},
]
这是我的json响应，我想获取所有带有数组对象的响应对象，而我尝试过:-
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>
)}
然后使用项，然后在内部使用带有索引的子项
但随后的错误表明 undefined不是对象(正在评估"item.resultlist.map")
using item then for inside i used sub with index
but then error showsthat
undefined is not an object (evaluating 'item.resultlist.map')
如何获取此嵌套数组对象或我的响应json出了点问题，请提示我我在哪里?多数情况下，当我尝试使用
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];
然后使用控制台，我只能获取单个对象，但是当使用此map函数获取其未定义的对象时
then with console i can fetch only single object but when using this map function to fetch then its undefined
推荐答案
根据该问题，您的JSON数组有4个对象，但是只有3个对象具有称为 resultlist &的嵌套数组.还没有1个对象.
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",
}
这会导致错误 undefined不是对象(评估"item.resultlist.map")，因为您需要一个数组才能在JS中使用 map .但是该对象没有结果列表.
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.
这是您需要从后端处理的事情.如果没有，则可以通过添加 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
这篇关于如何在React Native中获取数组对象内的嵌套数组对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
