Map Json array inside a Json React

Question

I have below JSON file. There is an Array(answers) inside that JSON. I want to map and render them.

    {
    "qID": "177",
    "myQuestion": true,
    "qContent": "testing",
    "answers": [{
            "anonymous": true,
            "aID": "184",
            "aContent": "test",
            "aDate": "Mon, 14 Sep 20 06:47:38 +0000",
            "myAnswer": false,
            "authorName": "abc",
            "aFeaturedImg": "..\/uploads\/407378vk053.jpg",
            "authorImg": "https:\/\/lh3.googleusercontent.com\/a-\/AOh14GjhhO-11Wktws9-FXBZoWk3vT8tRM2Sy7IQ4cnpw=s96-c"
        },
        {
            "anonymous": true,
            "aID": "184",
            "aContent": "test",
            "aDate": "Mon, 14 Sep 20 06:47:38 +0000",
            "myAnswer": false,
            "authorName": "abc",
            "aFeaturedImg": "..\/uploads\/407378vk053.jpg",
            "authorImg": "https:\/\/lh3.googleusercontent.com\/a-\/AOh14GjhhO-11Wktws9-FXBZoWk3Cv8tRM2Sy7IQ4cnpw=s96-c"
        }
    ]
}

my react code like this. I want to use state

function Question({ match }) {

useEffect(() => {
    fetchItem();
}, []);

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ qID: match.params.id })
};

const [item, setItem] = useState([]);



const fetchItem = async () => {
    const data = await fetch('https://example.com/api/getAnswer.php' , requestOptions);
    const item = await data.json();
    setItem(item);
    
         
};  


return (        
    <Container maxWidth="sm">
         
         {item.answers.map(answer => (
         <Card key={answer.qID}>{answer.qContent}</Card>
    ))}           
    </Container>
);

}

export default Question; But This not work. It gives following error

TypeError: Cannot read property 'map' of undefined

what you get for console.log(item.answers) just before the render? and is this json data coming from ajax? then how your item state looks like? — Kalhan
– Kalhan, Commented Sep 17, 2020 at 9:58

Yves Kipondo · Accepted Answer · 2020-09-17 10:45:33Z

1

If you aren't sure that the answers key of you data will considere as an array you can form javascript to considere it like that by passing it throught Array.from

let data = {
"qID": "177",
"myQuestion": true,
"qContent": "testing",
"answers": [{
        "anonymous": true,
        "aID": "184",
        "aContent": "test",
        "aDate": "Mon, 14 Sep 20 06:47:38 +0000",
        "myAnswer": false,
        "authorName": "abc",
        "aFeaturedImg": "..\/uploads\/407378vk053.jpg",
        "authorImg": "https:\/\/lh3.googleusercontent.com\/a-\/AOh14GjhhO-11Wktws9-FXBZoWk3vT8tRM2Sy7IQ4cnpw=s96-c"
    },
    {
        "anonymous": true,
        "aID": "184",
        "aContent": "test",
        "aDate": "Mon, 14 Sep 20 06:47:38 +0000",
        "myAnswer": false,
        "authorName": "abc",
        "aFeaturedImg": "..\/uploads\/407378vk053.jpg",
        "authorImg": "https:\/\/lh3.googleusercontent.com\/a-\/AOh14GjhhO-11Wktws9-FXBZoWk3Cv8tRM2Sy7IQ4cnpw=s96-c"
    }
]
}

class App extends React.Component {
    render(){
        let answers = Array.from(data.answers)
        
        return (<div>
            {answers.map(ans => {
                return <p>{ans.aContent}</p>
            })}
        </div>)
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

As the item state can be an empty array before you get the data from the API, you can check It availability before performing map like this

return (        
    <Container maxWidth="sm">     
        {item.answers && item.answers.map(answer => (
             <Card key={answer.qID}>{answer.qContent}</Card>
        ))}           
    </Container>
);

{item.answers && item.answers.map(answer => (...))} this like check if item.answers exits before performing map on array of answers

edited Sep 17, 2020 at 10:45

answered Sep 17, 2020 at 10:06

Yves Kipondo

5,6931 gold badge22 silver badges33 bronze badges

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

4 Comments

Dmap Over a year ago

Thank you so much for the quick answer. I want to implement this using state. I modified my question. can you help me?

Yves Kipondo Over a year ago

You want the response to be save in your Component state and map the answers array which is hold in your component state

Dmap Over a year ago

Hi. I tried following. But still gives an error.[code]const fetchItem = async () => { const data = await fetch('sith.lk/api/getAnswer.php' , requestOptions); const item = await data.json(); setItem(item); const answers = Array.from(item.answers); setAnswers(answers); }; return ( <Container maxWidth="sm"> {answers.map(answer => ( <Card key={answer.qID}>{answer.qContent}</Card> ))} </Container> );

Yves Kipondo Over a year ago

The data you provide in the question It's the way the response came back from the API's call

That Guy Kev · Accepted Answer · 2020-09-17 10:05:41Z

1

you need to check if "item" contains valid value

{item && item.answers.map(answer => (
             <Card key={answer.aID}>{answer.aContent}</Card>
        ))}

answered Sep 17, 2020 at 10:05

That Guy Kev

3962 silver badges11 bronze badges

3 Comments

Dmap Over a year ago

Hi. Thank you for your answer. But this is not working.

That Guy Kev Over a year ago

try to hook item in useEffect useEffect(() => { fetchItem(); }, [item]);

That Guy Kev Over a year ago

did you also try to consol.log(item) inside fetchItem? to make sure you have the correct data

lanxion · Accepted Answer · 2020-09-17 09:56:51Z

0

You need to parse your JSON into a javascript object, try doing this

let parsed_object = JSON.parse(item);

And then you can use map on the parsed_object.

answered Sep 17, 2020 at 9:56

lanxion

1,4301 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Map Json array inside a Json React

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related