读取JSON并将其输出到HTML表中
Reading a JSON and output into a HTML Table
我正在尝试读取以下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,下面的代码展示了如何遍历Shortcuts
Json对象数组并为此构建表。
这是代码:
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;
}
看完你的答案后,我终于可以修改我的代码了,现在它工作得很好。
相关文章:
- 将行添加到具有固定标题的HTML表中
- 如何使用Javascript在HTML表中查找第一个空行
- 需要将单元格值复制到html表中的其他单元格中
- 如何在html表中插入多个相同的图像
- 从html表中的输入数据创建图表
- Javascript在HTML表中输出在线用户名
- 如何使用 Backbone 将多条记录呈现到 html 表中.js .
- 通过javascript/jquery从html表中获取值并进行计算
- jQuery对象从html表中查询为两个一维数组,用于Chartist图表
- 在HTML表中插入时立即触发操作
- 如何使用javascript在html表中删除字符串
- 如何使用JavaScript检查HTML表中插入的值的类型
- 使用'从HTML表中提取行的内容<tr onclick=alertContents()>'
- 使用regex从巨大的html表中查找某些td值
- 计数HTML表中筛选的结果
- 如何在单击行时获取html表中第一列的值
- 如何比较单元格值和隐藏 html 表中的行
- 从 html 表中选择一行(突出显示)并在单击按钮时发送值
- 当输入字段位于 HTML 表中且其类型为“隐藏”时进行表单验证
- 如何在动态生成的 HTML 表中使用 2D 数组在 TD 标签中设置值