[英]How to access nested JSON object in React native using map method?
I want to list the JSON object inside a card. 我想列出卡内的JSON对象。 Following is my JSON data. 以下是我的JSON数据。
[
{
"data":{
"name":"Economy",
"categories":[
{
"id":28,
"name":"Economy",
"slug":"economy",
"image":"https://asdfghh/gjnk/User-default-image-boy.png"
}
],
"instructor":{
"id":"24",
"name":"asdfg",
"avatar":"https://asdfgh/fghj/User-default-image-boy.png",
"sub":""
},
"menu_order":0
},
"headers":[
],
"status":200
},
{
"data":{
"name":"MCQ",
"categories":[
],
"instructor":{
"id":"1",
"name":"qwertyy",
"avatar":"https://asdfgh//bpthumb.jpg",
"sub":""
},
"menu_order":0
},
"headers":[
],
"status":200
}
]
How do I map over this JSON object? 如何在此JSON对象上映射? I want data.categories.name
, data.instructor.name
to be listed inside a card, and the rendering in React is as follows: 我想在卡中列出data.categories.name
, data.instructor.name
,在React中的渲染如下:
renderCourses (){
return this.state.courses.map(course =>
<HomeScreen key={course.categories.name} course={course}/>)
render(){
console.log(this.state);
return(
<ScrollView>
{this.renderCourses()}
</ScrollView>
);
}
}
But nothing is showing inside the card. 但是卡内没有任何显示。 How can I do this? 我怎样才能做到这一点?
According to your JSON data of courses, the categories inside it is a array of objects so you can't directly use course.categories.name . 根据您的课程JSON数据,其中的类别是对象数组,因此您不能直接使用course.categories.name 。 Inside your render try and print this as below:- 在您的渲染器内部尝试并按以下方式打印:
renderCourses = () => {
return (<div>
{this.state.courses.map((course, index)=> <HomeScreen key={course.categories[0].name || index} course={course}/>)}
</div>)
}
render(){
console.log(this.state);
return(
<ScrollView>
{this.renderCourses()}
</ScrollView>
);
}
Let me know if this doesn't solve your problem. 让我知道这是否不能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.