Question

我有一个来自api的json数据网址。我正试图将这些数据（仅使用javascript）拉入到HTML表格中。我已经尝试过多种方法，但无论如何，该表都没有使用JSON文件中的数据。我想知道是否有任何明显不起作用的人突出了什么？我刚刚为此目的编写了url（真正的url是拉json文件）。

当我通过开发人员工具运行它时，它会给我以下错误：

testingjson.html：7未捕获的ReferenceError：$未定义

<html>
   <head>
      <script>
         $(function() {
         var people = [];

         $.getJSON('https://api.url.come', function(data) {
            $.each(data.person, function(i, f) {
               var tblRow = "<tr>" + "<td>" + f.organization + "</td>" +
                "<td>" + f.service_url + "</td>" + "<td>" + f.account + "</td>" + "<td>" + f.created_at + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata tbody");
          });
         });             
         });
      </script>
   </head>
   <body>
      <div class="wrapper">
         <div class="profile">
            <table id= "userdata" border="2">
               <thead>
                  <th>Organization</th>
                  <th>URL</th>
                  <th>Account</th>
                  <th>Created</th>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

阅读并尝试了所有建议后：这个建议似乎最接近，但尚未提取任何数据：

<html>
   <head>
   </head>
   <body>
      <div class="wrapper">
         <div class="profile">
            <table id= "userdata" border="2">
               <thead>
                  <th>Organization</th>
                  <th>URL</th>
                  <th>Account</th>
                  <th>Created</th>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
            <script>
         (function() {

         var table = document.getElementById("userdata"); 

         var people = [];

         fetch('https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200')
                    .then(data => data.json())
                    .then(json => json.map(f=>{
                    var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
                "<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
                table.innerHTML += tblRow;


                    }))
                    })();
         </script>
   </body>
</html>

现在，我尝试了这个，它仍然无法正常工作：

<html>
<head>


<script type="text/javascript">
var url = "https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200";
var tableBody = document.getElementById("userdataBody");

var req = new XMLHttpRequest();
req.open("GET", url, true);
req.onload = function(data) {

    if (req.status === 200) {
        console.log("Success");

        var persons = JSON.parse(req.response);
        var newContent = "";

        persons.forEach(function(person) {
            var tblRow = "<tr>" + "<td>" + person.organization + "</td>" +
                "<td>" + person.account + "</td>" + "<td>" + person.service_url + "</td></tr>";
            newContent += tblRow;
        });

        tableBody.innerHTML += newContent;
    } else {
        console.log("Error : %d (%s)", req.status, req.statusText);
    }



}
req.send();
</script>








</head>

<body>


   <div class="wrapper">
         <div class="profile">
            <table id="userdata" border="2">
               <thead>
                  <th>Name</th>
                  <th>Unsername</th>
                  <th>Email</th>
               </thead>
               <tbody id="userdataBody">
               </tbody>
            </table>
         </div>
      </div>


</body>
</html>

Answer 1

更新试试这个：https://jsfiddle.net/nz810m4r/24/我认为其中一个问题是网址，我认为API不支持?agencies=2200等类型的查询：

(function() {

         var table = document.getElementById("userdata"); 

         var people = [];
        var xhttp = new XMLHttpRequest();
           xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
              var res = JSON.parse(this.responseText);
              console.log(res.results);
               res.results.map(f=>{
              var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
                                    "<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
                                    table.innerHTML += tblRow;
              }); 
             }
           };
           xhttp.open("GET", "https://api.gsa.gov/systems/digital-registry/v1/social_media.json", true);
           xhttp.send(); 
                    })();

这是一个功能示例https://jsfiddle.net/nz810m4r/

当然，这不是唯一的解决方案，但在这种情况下，我已将[{1}}替换为$.getJSON和承诺，fetch()替换为$.each }。

map()

Answer 2

i声明中function(i,f)做了什么？

此外，您完全使用append()方法。

应该是：

$('#userdata tbody').append(tblRow);

另外，请查看以下链接：

Opening JSON without using jQuery

Answer 3

在脚本标记内添加此内容有助于：

type="text/javascript"

解析json数据时 - 仅使用javascript - 没有数据出现？

3 个答案: