CODEWITHSUNDEEP
reactjs
Dmap
Dmap

Reputation: 199

Map Json array inside a Json React

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

Upvotes: 0

Views: 285

Answers (3)

Yves Kipondo
Yves Kipondo

Reputation: 5603

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

Upvotes: 1

That Guy Kev
That Guy Kev

Reputation: 396

you need to check if "item" contains valid value

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

Upvotes: 1

lanxion
lanxion

Reputation: 1430

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.

Upvotes: 0

Related Questions