如何迭代json数据并在组件中呈现
如何迭代json数据并在组件中呈现
提问于 2019-07-05 13:54:14
我是一个新的react native，我已经能够成功地从服务器获取json数据。如何将对象传递到数组中并在组件中呈现。以下是我的代码
我尝试使用.map()遍历对象，得到的结果是"undefined is not a function“。我还尝试使用Object.values将对象转换为数组，但得到错误消息的值不能从可读性转换为字符串。
constructor(props) {
super(props);
//useraccountdetails will contain the object from the server
this.state = {
useraccountdetails: [],
}
this.loaduser_account_details= this.loaduser_account_details.bind(this)
}
componentWillMount() {
//this function will fetch the data from the server
this.loaduser_account_details()
}
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.text())
.then((responseJson) => {
var jsonconvertedrows = JSON.parse(responseJson);
var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: finaldata });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}
//alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]
render(){
return (
/**page setup */
<View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>
{/**body */}
<Grid>
{
this.state.useraccountdetails.map((count)=>{
<Text>{count.username}</Text>
})
}
</Grid>
</View>
)
}回答 3
Stack Overflow用户
发布于 2019-07-05 14:20:52
它看起来像是因为你在你的渲染中迭代一个字符串。一旦您的响应成功，this.state.useraccountdetails就是一个字符串，因为您将它设置为stringified的结果。要纠正这一点，你需要做的就是把你的setState改成
this.setState({ useraccountdetails: jsonconvertedrows });Stack Overflow用户
发布于 2019-07-05 14:36:44
你能试试下面的代码吗？
constructor(props) {
super(props);
//useraccountdetails will contain the object from the server
this.state = {
useraccountdetails: [],
}
this.loaduser_account_details= this.loaduser_account_details.bind(this)
}
componentWillMount() {
//this function will fetch the data from the server
this.loaduser_account_details()
}
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.json())
.then((responseJson) => {
//var jsonconvertedrows = JSON.parse(responseJson);
//var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: responseJson });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}
//alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]
render(){
return (
/**page setup */
<View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>
{/**body */}
<Grid>
{
return this.state.useraccountdetails.map((count)=>{
return(
<Text>{count.username}</Text>
)
})
}
</Grid>
</View>
)
}您正在尝试将响应更改为'text'，请将其从response.text()更改为response.json()
Stack Overflow用户
发布于 2019-07-05 14:40:06
如代码所示更改this.setState({ useraccountdetails: Object.values(jsonconvertedrows) });并尝试：
loaduser_account_details() {
fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
method: 'POST',
headers: {
'Accept': 'text/plain',
'Content-Type': 'text/plain',
},
body: JSON.stringify({
globaluseridDB: modulevariables.globaluserid,
})
}).then((response) => response.text())
.then((responseJson) => {
var jsonconvertedrows = JSON.parse(responseJson);
var finaldata = JSON.stringify(jsonconvertedrows)
this.setState({ useraccountdetails: Object.values(finaldata) });
Alert.alert("User details", this.state.useraccountdetails)
}).catch((error) => {
console.error(error);
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56897224
复制相关文章
相似问题
腾讯云开发者
