Question

我尝试阅读以下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 ]有Square Brackets []，而"UserInfo":{ },有Curly Bracket {}

Answer 1

我找到了解决办法。

首先，我注意到在你开始使用javascript时，你解析JSON响应，重新绑定它并篡改它。我认为你不应该这样做。

只需使用JSON解析的结果对象即可。你可以通过旅行快捷方式阵列获得所有的EnvIds。这是一些代码。

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

这是一个有效的jsfiddle。

Answer 2

您的代码与您发布的内容有很多错误。

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

根据我的理解，你需要解析你的JSON并遍历JsonObject来构建你的HTML，下面的代码展示了如何遍历Shortcuts Json Object Array并为此构建表。

这是代码：

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); 
       }   
 }

也许这会对你有帮助。

Answer 3

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

在通过你的答案后，我终于能够修改我的代码了，现在它运行正常。

读取JSON并输出到HTML表

3 个答案: