在 react-native 中迭代 JSON 数组
Posted
技术标签:
【中文标题】在 react-native 中迭代 JSON 数组【英文标题】：iterate over JSON array in react-native 【发布时间】：2018-03-23 22:47:15 【问题描述】：我在使用 react native 时遇到了问题。我已经解析了一个 JSON 对象，需要遍历一个嵌套在其中的数组。我想在一个列表中获取所有 profiles 对象。
我尝试使用以下代码，但它没有获取配置文件对象。如何打印列表中的所有配置文件对象？
代码：
import React, Component from 'react';
import AppRegistry, StyleSheet, Modal, Image, Platform from 'react-native';
import Spinner, Text, View, Content, Container,Item,Header,Body, Title, Button, Icon, InputGroup, Input, ListItem, List, Radio, CheckBox, Thumbnail, Card, CardItem, H3 from 'native-base';
class Profile extends Component
constructor(props)
super(props);
this.state =
radio1 : true,
check1: false,
modalVisible: false,
search: 'nativebase',
selectedItem: undefined,
results:
items: []
setModalVisible(visible, x)
this.setState(
modalVisible: visible,
selectedItem: x
);
toggleCheck()
this.setState(
check1 : !this.state.check1
)
componentDidMount()
var that = this;
this.search();
search()
// Set loading to true when the search starts to display a Spinner
this.setState(
loading: true
);
var that = this;
return fetch('https://mysite.in/api/profilematch/25/')
.then((response) => response.json())
.then((responseJson) =>
// Store the results in the state variable results and set loading to
// false to remove the spinner and display the list of repositories
that.setState(
results: responseJson,
loading: false
);
return responseJson;
)
.catch((error) =>
that.setState(
loading: false
);
console.error(error);
);
render()
var that = this;
return (
<Container>
<Content>
<List>
this.state.loading? <Spinner /> : <List dataArray=this.state.results renderRow=(results) =>
<ListItem button onPress=()=>this.setModalVisible(true, item) >
<Thumbnail square size=80 source=uri: results.avatar_url />
<Text>Name: <Text style=fontWeight: '600', color: '#46ee4b'>results</Text></Text>
<Body>
<Text>results.sur_name</Text>
</Body>
</ListItem>
/>
</List>
</Content>
</Container>
);
const styles = StyleSheet.create(
header :
marginLeft: -5,
marginTop: 5,
marginBottom: (Platform.OS==='ios') ? -7 : 0,
lineHeight: 24,
color: '#5357b6'
,
modalImage:
resizeMode: 'contain',
height: 200
,
bold:
fontWeight: '600'
,
negativeMargin:
marginBottom: -10
);
module.exports = Profile;
json:
[
"id": 4,
"profiles": [
"id": 18,
"first_name": "sweta",
"is_active": true
,
"id": 20,
"first_name": "Hiteshi",
"is_active": true
,
"id": 3,
"first_name": "Sneha",
"is_active": true
],
"user": 25
]
我要做的就是在列表中打印profiles 对象。
【问题讨论】：
responseJson[0].profiles 是您要迭代的数组 - 所以也许是 results: responseJson[0].profiles ？
@JaromandaX 非常感谢。它的工作，你拯救了我的一天。
【参考方案1】：
在获取时添加另一个变量
that.setState(
//assuming profiles exist
profiles: responseJson[0].profiles,
);
创建列表视图
<ListView dataSource=this.state.profiles renderRow=this.renderRow.bind(this) />
显示数据
renderRow(rowData)
return (<Text>rowData.first_name</Text>);
我希望这对你有帮助。未经测试，但应该像这样工作。
【讨论】：
以上是关于在 react-native 中迭代 JSON 数组的主要内容，如果未能解决你的问题，请参考以下文章
如何从 fetch 中获取 JSON 数据（react-native）
react-native 如何从本地JSON文件中获取数据？