解析 json 数据时 - 仅使用 javascript - 没有数据显示？

Posted 2023-03-05

技术标签:

【中文标题】解析 json 数据时 - 仅使用 javascript - 没有数据显示？【英文标题】：When parsing json data - using only javascript - no data shows up? 【发布时间】：2018-11-27 14:04:46 【问题描述】：

我有一个从 api 提取的 json 数据 url。我正在尝试仅使用 javascript 将这些数据提取到 html 中的表格中。我尝试了多种方法，但无论如何，该表都没有填充来自 JSON 文件的数据。我想知道是否有任何明显不工作的人脱颖而出？我刚刚为此目的编写了 url（真正的 url 是拉 json 文件）。

当我通过开发者工具运行它时，它给了我以下错误：

testingjson.html:7 Uncaught ReferenceError: $ is not defined

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

【问题讨论】：

我需要在不使用 jQuery 的情况下执行此操作... 【参考方案1】：

更新试试这个：https://jsfiddle.net/nz810m4r/24/ 我认为问题之一是 url，我认为 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/

这当然不是唯一的解决方案，但在这种情况下，我已将 $.getJSON 替换为 fetch() 和 promises，并将 $.each 替换为 map()。

(function() 

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

         var people = [];

         fetch('https://jsonplaceholder.typicode.com/posts')
                    .then(data => data.json())
                    .then(json => json.map(f=>
                    var tblRow = "<tr>" + "<td>" + f.userId + "</td>" +
                     "<td>" + f.id + "</td>" + "<td>" + f.title + "</td>" +  "<td>" + f.body + "</td>" + "</tr>"
                    table.innerHTML += tblRow;
                    ))
                    )();

【讨论】：

再次感谢您！出于某种原因，它只能在 Chrome 中运行——但我也需要它在 IE 11 中运行——你能想到什么？我认为缓存可能是问题，请尝试删除缓存谢谢，但试过了，但没有用....谢谢！我想知道是不是因为我正在调用一个 https api，而我把这个页面放在的网站只是 http 我不确定 ie11 是否支持 XMLHttpRequest()，所以试试这个 ***.com/questions/38590353/… 的响应，是的，你可能会遇到混合内容 https 和 http 的问题显然是因为我正在使用箭头。知道除了箭头我还能用什么【参考方案2】：

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

另外，您使用的 append() 方法完全错误。

应该是：