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.

Ravi · Accepted Answer · 2018-03-06 08:55:40Z

1

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

details:responseData.meta.questions

answered Mar 6, 2018 at 8:55

Ravi

35.7k22 gold badges126 silver badges188 bronze badges

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

6 Comments

Anu Over a year ago

I've updated my question like above but still getting error..please help to figure it out..

Ravi Over a year ago

Are you getting the same error? make sure you have defined details[] in constructor or else put condition before using it, check whether it is null or not.

Anu Over a year ago

Now i'm getting the error cannot read property content of undefined

Ravi Over a year ago

check the data you are getting, you might need to use details:responseData.meta.questions or details:responseData.data.meta.questions. check what is the value you are getting in responseData and put condition according to it. Inshort your details value should be array, not an object

Anu Over a year ago

Cool working it was my mistake since i've maped the questions array , i only need to access {a.content} like this..Thank you so much for your valuable reply

|

Sagaryal · Accepted Answer · 2018-03-06 09:29:08Z

0

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

answered Mar 6, 2018 at 9:29

Sagaryal

4151 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to map over objects in React Native?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related