How to access nested json inside jsx component in react native?

Question

I am trying to list the server response , but some mistake is their in my code about accessing nested json..Following is the structure of json

Updated:

  {
    "child": [],
    "courses": [{
        "data": {
            "name": "Student 1",
            "date_created": 1514610451,
            "total_students": 4,
            "seats": "",
            "start_date": false,
            "categories": [{
                "name": "Subject",
                "slug": "Subject"
            }],
            "intro": {
                "id": "1",
                "name": "Main Admin",
                "sub": ""
            },
            "menu_order": 0
        },
        "headers": [],
        "status": 200
    }]
  }

And my react part is

render(){
        return this.state.course.map(course =>
        <Text style={styles.userStyle}>{course.courses.data.map(datas => datas.name)}</Text>
        );
    }

Please help me to figure out the mistake.I am getting this.state.course.map is not a function.My fetch request is as follows

state= {course:[]};
    componentWillMount(){
        fetch('https://www.mywebsite.com/' + this.props.navigation.state.params.id)
        .then((response) => response.json())
        .then((responseData) => this.setState({course: responseData}))
    }

Your Json structure is invalid. Validate you json structure: jsonformatter.curiousconcept.com — Himanshu Dwivedi
– Himanshu Dwivedi, Commented Jan 19, 2018 at 6:23
Did you check from that link i had given. Because I am getting as invalid json. Please validate from that link — Himanshu Dwivedi
– Himanshu Dwivedi, Commented Jan 19, 2018 at 6:29
Yes. I think you are getting invalid json because i've pasted only few lines from my json response..I will update it. — Neethu M
– Neethu M, Commented Jan 19, 2018 at 6:31
I've updated my question now i am getting a valid json ,it was a typo.But how can i access the datas? — Neethu M
– Neethu M, Commented Jan 19, 2018 at 6:41

Orphid · Accepted Answer · 2018-01-19 08:02:03Z

1

So you would need to show us how this.state is set, but if you're doing something like this.setState(jsonObject), the property you are looking for seems to be this.state.courses. This would access the array of courses. However, in the subsequent lines you try to access course.courses, which suggests you're setting the state like this.seState({course: jsonObject}) so it's not clear.

I'd say if you fix the first problem, you'll immediately hit another one because it doesn't look like data is an array but an object, so trying to call map on it is unlikely to do what you want (unless you've been playing with prototypes).

EDIT:

In response to the new info, I recommend the following:

    render(){
         if(this.state.course && this.state.course.courses) {
            return this.state.course.courses.map(course =>
            <Text style={styles.userStyle}>{course.data.name}</Text>
            );
        } else {
           return [];
        }
   }

edited Jan 19, 2018 at 8:02

answered Jan 19, 2018 at 7:00

Orphid

2,8622 gold badges30 silver badges41 bronze badges

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

5 Comments

Neethu M Over a year ago

Yes i've updated my question.But i'm not clear what you just said..Is the error is with using map method over the object?

Orphid Over a year ago

@NeethuM edited my answer. Yeah, you were calling map on the top level object, not the array of courses inside it.

Neethu M Over a year ago

well sorry to say none of the above is working..I don't why i'm getting the same error

Orphid Over a year ago

Then you've got other problems in your code I think. Check whether course is null, that the response has completed before trying to render etc. There were several problems with your original code, so I'm imagining there are more elsewhere.

Neethu M Over a year ago

Hmm..yeah 'll check thoroughly..but when i consoled the response i'm getting values in it.

Collectives™ on Stack Overflow

How to access nested json inside jsx component in react native?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related