Display JSON child content to HTML table in Reactjs

Question

Guys i know this already asked many times, but i still don't get how to solve my problem. So what i want to do is display some nested JSON data to HTML table.

So this is the JSON i fetch.

and this is my reactjs code:

 var [infectionData, setInfectionData] = useState({
    response: []

  });

 var [isLoaded, setLoaded] = useState(false);

 useEffect(() => {

    var fetchData = async () => {
        var url = "https://api.covid19api.com/summary";

        var result = await axios.get(url);
        var response = result.data

        response = Array(response);

        setInfectionData({ response: response });

        console.log(infectionData.response);

    }

    fetchData();
    setLoaded(true);

});

and this is the HTML table:

            <Table bordered hover className="mt-3 w-75">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Total Infection</th>
                        <th>New Deaths</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        infectionData.response.Countries.map((item) => (
                            <tr>
                                <td>{item.Country}</td>
                                <td>{item.TotalConfirmed}</td>
                                <td>{item.NewDeaths}</td>
                            </tr>


                        ))
                    } 
                </tbody>

            </Table>

Any idea how to solve this ?

Tazo leladze · Accepted Answer · 2020-04-19 06:05:47Z

1

Here are the Array constructor https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

response = Array(response); remove this line and everything will be good.

Or

infectionData.response[0].Countries.map((item) => (
                        <tr>
                            <td>{item.Country}</td>
                            <td>{item.TotalConfirmed}</td>
                            <td>{item.NewDeaths}</td>
                        </tr>


                    ))

answered Apr 19, 2020 at 6:05

Tazo leladze

1,4991 gold badge17 silver badges27 bronze badges

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

Comments

Sagar Roy · Accepted Answer · 2020-04-19 06:10:00Z

1

You may try with this

    infectionData.response.Countries && infectionData.response[0].Countries.map((item) => (
                        <tr>
                            <td>{item.Country}</td>
                            <td>{item.TotalConfirmed}</td>
                            <td>{item.NewDeaths}</td>
                        </tr>


                    ))

edited Apr 19, 2020 at 6:10

answered Apr 19, 2020 at 5:49

Sagar Roy

4434 silver badges12 bronze badges

3 Comments

Foxtrot 1-5 Over a year ago

Thank you for your solution. The error 'TypeError: Cannot read property 'map' of undefined ' is not shown anymore. But the table is still empty...

Sagar Roy Over a year ago

because infectionData this variable is empty . You should save data in state . Its better if you use rudex .

Foxtrot 1-5 Over a year ago

Sorry, how to do that ?

Collectives™ on Stack Overflow

Display JSON child content to HTML table in Reactjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related