извлечение данных из внешнего файла JSON во внутреннюю таблицу HTML с использованием JavaScript - PullRequest
0 голосов
/ 05 февраля 2020

Я пытаюсь извлечь данные из внешнего JSON файла во внутренний HTML, но не могу понять, в чем проблема. Данные плавно отображаются через консоль, но на странице HTML ничего не отображается.

Все выглядит идеально: (

Пожалуйста, помогите мне определить и решить эту проблему

    <!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>

1 Ответ

0 голосов
/ 05 февраля 2020

Javascript объекты не имеют свойства length. Это значение будет undefined, следовательно, ваше условие никогда не будет запущено.

Вместо этого вы можете сделать:

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

Если вы хотите убедиться, что оно не будет d ie, когда нет данных (то есть неопределенных), вы можете сделать:

if (typeof(data) === 'object' && Object.keys(data).length > 0)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...