html таблица от get json не видна - PullRequest
Новая
       1

html таблица от get json не видна

0 голосов
/ 10 апреля 2020

Я пытаюсь выучить jquery и json, поэтому я нашел этот пример и пытался запустить этот код. Но, похоже, не работает часть json. Это просто показывает заголовок таблицы. Это может быть проблема браузера или что-то еще может быть не так?

html + js

<!DOCTYPE html>
<html>
<body>
    <table id="userdata">
        <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
           $.getJSON('users.json', function(data) {
               $.each(data, function(index, element) {
                  var tblRow = "<tr>" + 
                                    "<td>" + element.firstName + "</td>" +
                                    "<td>" + element.lastName + "</td>" + 
                                    "<td>" + element.job + "</td>" + 
                                    "<td>" + element.roll + "</td>" + 
                              "</tr>"
                   $(tblRow).appendTo("#userdata tbody");
             });

           });

        });
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</body>
</html>

file users. json выглядит следующим образом: 

[
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "roll": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Playboy",
           "roll": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "roll": 40
       }
]

Ответы [ 2 ]

0 голосов
/ 18 апреля 2020

Помимо неправильного упорядочения тегов сценария, это была проблема CORS, которую можно решить, изменив некоторую конфигурацию в браузере или запустив веб-страницу через сервер, например python3 -m http.server

0 голосов
/ 10 апреля 2020

Вы сделали две ошибки:

  1. Вы включили slim версию jQuery, которая не включает в себя функциональность AJAX (включая $.getJSON() ). Измените свой код, чтобы он ссылался на полную версию jQuery: 

    <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  2. JavaScript, особенно заинтересован в том порядке, в котором вы ссылаетесь и выполняете свои сценарии. Чтобы сослаться на функциональность jQuery -specifi c, вам нужно будет добавить тег сценария выше, прежде чем настраивать блок script, который использует функции $. Поменяйте местами порядок тегов, как у вас сейчас: 

    <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
  $(document).ready(function() {
     $.getJSON('users.json', function(data) {
         $.each(data, function(index, element) {
            var tblRow = "<tr>" + 
                              "<td>" + element.firstName + "</td>" +
                              "<td>" + element.lastName + "</td>" + 
                              "<td>" + element.job + "</td>" + 
                              "<td>" + element.roll + "</td>" + 
                        "</tr>"
             $(tblRow).appendTo("#userdata tbody");
       });
     });
   });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...