How to render nested JSON inside JSX in react native?

Question

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

Phonbopit · Accepted Answer · 2018-01-16 12:30:53Z

2

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)

answered Jan 16, 2018 at 12:30

Phonbopit

3,3833 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xjmdoo · Accepted Answer · 2018-01-16 12:26:54Z

1

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

answered Jan 16, 2018 at 12:26

xjmdoo

1,75611 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to render nested JSON inside JSX in react native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related