CODEWITHSUNDEEP
javascriptjsonreact-nativejsx
Anu
Anu

Reputation: 1742

How to render nested JSON inside JSX in react native?

I want to list the json response. How do i render nested json inside my jsx? following is json response

[{
    "data": {
        "total_students": 13,
        "seats": "",
        "categories": [{
            "id": 28,
            "name": "Economy",
            "slug": "economy",
        }],
        "instructor": {
            "id": "24",
            "name": "Ad",
            "sub": ""
        },
        "menu_order": 0
    },
    "headers": [],
    "status": 200
}

This is how the response looks like. Also rendering in react is as shown below

return this.state.user.map(user =>

        <CardSection>
        <View style={styles.thumbnailContainerStyle}>
        <Text key= {user.data.name} style={styles.userStyle}>{this.state.user.data}</Text>
        </View>
        </CardSection>

I have tried like the above but getting error in rendering part cannot define name of undefined.What wrong am i doing?please help

Upvotes: 0

Views: 490

Answers (2)

Phonbopit
Phonbopit

Reputation: 3383

You don't have a key name in data object that undefined If you want to nested JSON you can access like

  • name in instructor : user.data.instructor.name
  • name in categories (array) : user.data.categories.map(category => category.name)

Upvotes: 2

xjmdoo
xjmdoo

Reputation: 1736

user.data.name does not seem to be present in your JSON response. The name could be user.data.instructor.name.

Upvotes: 1

Related Questions