读取JSON并将其输出到HTML表中

Reading a JSON and output into a HTML Table

本文关键字：HTML 表中 输出 JSON 读取      更新时间：2023-09-26

我正在尝试读取以下JSON并将结果输出到HTML表中。我只想把所有EnvID都放到HTML表中。我试过了，但似乎不起作用。

代码：

function myFunction(response) {
    var arr = JSON.parse(response);
    var stringified = JSON.stringify(arr);
    stringified.replace(/"'"/gm, '')
    var jsonObject = JSON.parse(stringified);
    var Profile = jsonObject.value[0].PROFILE;
    var jsonProfile = JSON.parse(Profile);
    alert(Profile); //This alert works, and outputs the whole JSON as expected.
    var tbl=$("<table/>").attr("id","mytable");
    $("#id01").append(tbl);
    for(var i=0;i<jsonProfile.length;i++)
    {
        var tr="<tr>";
        var td1="<td>"+obj[i]["EnvId"]+"</td></tr>";
       $("#mytable").append(tr+td1); 
    }   
    document.getElementById("id01").innerHTML = out;
}

HTML:

<!doctype html>
<style type="text/css">
    #mainPopup {
        padding: 10px;
        height: 200px;
        width: 400px;
        font-family: Helvetica, Ubuntu, Arial, sans-serif;
    }
    h1 {
        font-size: 2em;
    }
</style>
<script src=popup.js></script>
<div id="mainPopup">
<h1>Hello extensionizr!</h1>
</div>
<div id="id01"></div>

JSON:

{  
   "Dashboard":1,
   "Theme":0,
   "Groups":[ somedata ],
   "UserInfo":{ somedata },
   "Shortcuts":[  
      {  
         "Dashboard":1,
         "Index":0,
         "EnvId":"1194"
      },
      {  
         "Dashboard":1,
         "Index":1,
         "EnvId":"2715"
      },
      {  
         "Dashboard":1,
         "Index":2,
         "EnvId":"2714"
      },
      {  
         "Dashboard":1,
         "Index":3,
         "EnvId":"2756"
      }
   ]
}

此外，我有点困惑，为什么这个JSON有不同的格式，比如"Groups":[ somedata ]有方括号[]，而"UserInfo":{ },有花括号{}

我找到了一个修复程序。

首先，我注意到在javascript的开头，你解析JSON响应，重新绑定它，然后篡改它。我认为你不应该这么做。

只需使用JSON解析的结果对象。你可以通过移动快捷方式数组来获得所有的环境ID。这是一些代码。

function myFunction(response) {
    //here you were parsing, restringifying and tampering with the JSON. I removed the later parts.
    var obj = JSON.parse(response);
    var tbl = $("<table/>").attr("id", "mytable");
    $("#id01").append(tbl);
    //Here I travel through the "Shortcuts" table, to display all the EnvIds as you wanted.
    for (var i = 0; i < obj["Shortcuts"].length; i++) {
        var tr = "<tr>";
        var td1 = "<td>" + obj["Shortcuts"][i]["EnvId"] + "</td></tr>";
        $("#mytable").append(tr + td1);
    }
    // I removed this line. "out" is never defined. I do not know its purpose.
    //document.getElementById("id01").innerHTML = out;
}

这是一把正在工作的小提琴。

您的代码有很多错误，就像您发布的一样。

对于与Json字符串中的{}和[]括号相关的查询，它们分别定义了Object和Object Array。如果您序列化对象，Json将把它封装到{}中，并且对象的List或Array的序列化将导致[]。

根据我的理解，您需要解析JSON并遍历JsonObject来构建HTML，下面的代码展示了如何遍历ShortcutsJson对象数组并为此构建表。

这是代码：

function myFunction(response) 
{
       var arr = $.parseJSON(json);
       var jsonProfile = arr.Shortcuts;
       var tbl=$("<table/>").attr("id","mytable");
       $("#id01").append(tbl);
       for(var i=0;i<jsonProfile.length;i++)
       {
          var tr="<tr>";
          var td1="<td>"+jsonProfile[i]["EnvId"]+"</td></tr>";
          $("#mytable").append(tr+td1); 
       }   
 }

也许这会对你有所帮助。

function myFunction(response) { 
    var arr = JSON.parse(response);
    var Profile = arr.value[0].PROFILE;
    var jsonProfile = JSON.parse(Profile);
    var out = "<table>";
    for(var i=0;i<jsonProfile.Shortcuts.length;i++)
    {
       out += "<tr><td>" +
       jsonProfile.Shortcuts[i].EnvId +
       "</td></tr>";
    }  
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

看完你的答案后，我终于可以修改我的代码了，现在它工作得很好。

相关文章：