How to map over objects in React Native?

Question

i need some help in rendering json inside jsx in react native..The response i'm getting from server is object so how do i loop through them?I'm getting a valid response from server , but i'm getting the issue on map method because i think map method work only on arrays.So please help me to do this.Following is json object

JSON

    {
    "content": "<p><strong>Preliminary Exam; MCQ –1</strong></p>\n",
    "meta": {
        "access": 1,
        "status": 0,
        "progress": 0,
        "marks": 0,
        "max": 60,
        "questions": [

            {
                "type": "single",
                "hint": "",
                "explanation": "",
                "content": "<p>Question Statement :</p>\n<ol>\n<li>The is question:</li>\n</ol>\n",
                "options": [
                    "(a).Answer1",
                    "(b).Answer2 ",
                    "(c).Answer3 ",
                    "(d).Answer4 "
                ],
                "correct": "4",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            },
            {
                "type": "single",
                "hint": "",
                "explanation": "",
                "content": "<p>2.Question 2</p>\n",
                "options": [
                    "(a) one ",
                    "(b) two  ",
                    "(c) three ",
                    "(d) four"
                ],
                "correct": "2",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            }
        ]
    }
}

I've tried like the following

examplecode

state = { details: [] };

componentWillMount() {
   AsyncStorage.getItem('userdetail').then((value) => {
       console.log(value);

       fetch('https://www.mywebsite.com', {
            method:'GET',
            headers: {
                'Authorization': value
            }
        })
        .then((response) => response.json())
        .then((responseData) =>
             this.setState({
                 details:responseData.meta.questions
             })
        );

    });
}

render() {
    console.log(this.state);
    return (
        this.state.details.map( a =>
            <Card>
                <CardSection>
                    <Text>{a.questions.content}</Text>
                </CardSection>
            </Card>     
    );
} 

But getting error this.state.details.map is not a function? Is the problem with my rendering method? Please help.

Answer 1

The issue on map method/function is that your are using it in a Single Object rather than in array. Your responseData is a huge object with questions array in it. You can map through questions as follows:

render() {
    console.log(this.state);
    return (
        this.state.details.meta.questions.map( a =>
            <Card>
                <CardSection>
                    <Text>{a.content}</Text>
                </CardSection>
            </Card>

        );
     );
} 

This should solve your problem

Answer 2

Issue is with responseData, it is an object not array, try with

details:responseData.meta.questions