fetching data from external JSON file into an innerHTML table using JavaScript

Question

I'm trying to fetch data from an external JSON file into the inner HTML but I can't understand what the problem is. Data is smoothly displayed through the console but nothing is showing up on the HTML page.

Everything looks perfect :(

Please help me identify and resolve this issue

    <!DOCTYPE html>
    <html>
    <body>
        <div class="container">
        <table class="table table-stripped">
            <thead>
                <tr>
                    <th>Player ID</th>
                    <th>Player Name</th>
                    <th>Player Country</th>
                </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
        <script>
                fetch("http://localhost/test.json").then (
                    res=>
                    {
                        res.json().then
                        (
                            data=>
                            {
                                console.log(data);
                                if(data.length >0)
                                {
                                    var temp = "";

                                    //Beginning of the For loop

                                    data.forEach((u)=>{
                                        temp +="<tr>";
                                        temp +="<td>"+u.Id+"</td>";
                                        temp +="<td>"+u.Name+"</td>";
                                        temp +="<td>"+u.Country+"</td>"
                                        temp +=  "</tr>";
                                        })
                                    // --- End of the For Loop

                                    document.getElementById("data").innerHTML = temp; //The #tbody ID
                                }
                            }
                        )
                    }
                )
        </script>
    </body>
    </html>

Are you trying to display it as plain text? What is your test.json file? — Thoth
– Thoth, Commented Feb 5, 2020 at 15:15

Jeremy Harris · Accepted Answer · 2020-02-05 15:07:31Z

0

Javascript objects do not have length property. That value will be undefined, hence your conditional will never run.

Instead you can do:

if (Object.keys(data).length > 0)

If you want to ensure it doesn't die when there is no data (i.e. undefined), you can do:

if (typeof(data) === 'object' && Object.keys(data).length > 0)

answered Feb 5, 2020 at 15:07

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

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

3 Comments

Gawel1908 Over a year ago

maybe script is running before DOMContentLodaded and there is no document.getElementById("data")

Abbas Alhashimi Over a year ago

In both cases, I got the exact error: Uncaught (in promise) TypeError: data.forEach is not a function.

Abbas Alhashimi Over a year ago

I tried replacing console.log(data); with console.log(JSON.stringify(data)); And all JSON records were displayed instead of 3 records only.

Collectives™ on Stack Overflow

fetching data from external JSON file into an innerHTML table using JavaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related