Question

我正在尝试将json响应显示到html表中。其中一个字段是我想要在表格中显示的图像。我当前的代码只显示json响应中的最后一个键/值，而不是表中的所有键。

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="http://www.tutorialspoint.com/scripts/style.css" />
<script type="application/javascript">
function loadJSON()
{
   var http_request = new XMLHttpRequest();
   var data_file = "/vcaWS/api/sources";

   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        for(var i=0;i<jsonObj.length;i++){
            document.getElementById("title").innerHTML = jsonObj[i].title;
            document.getElementById("logo_sm").innerHTML = jsonObj[i].logo_sm;
        }
    }
   }
   http_request.open("GET", data_file, true);
   http_request.send();
}
</script>
<title>Test JSON</title>
</head>
<body style="width:960px">
<h1>Test JSON</h1>
<table class="src">
<tr><th>Title</th><th>Logo_Small</th></tr>
<tr>
<td><div id="title">Youtube</div></td>
<td><div id="logo_sm">Youtube</div></td>
</tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON();">JSON Store </button>
</body>
</html>

json的回复如下：

[
   {
      "title":"Virtual Magician s Video Podcast",
      "logo_sm":"http://a5.mzstatic.com/us/r30/Podcasts/v4/cf/53/e1/cf53e162-f4c7-7842-173d-7f7f2a79fd7e/mza_854261567010408552.100x100-75.jpg"
   },
   {
      "title":"shralp! //surfing video podcast//",
      "logo_sm":"http://a5.mzstatic.com/us/r30/Podcasts/v4/ea/ff/d0/eaffd0d3-b1f9-e886-2ffd-5ff14bcb5edb/mza_1030973830906343038.100x100-75.jpg"
   },
   {
      "title":"this WEEK in TECH Video (small)",
      "logo_sm":"http://a4.mzstatic.com/us/r30/Podcasts2/v4/fb/59/fc/fb59fc2d-b1a2-98cf-e1f8-32bae7217912/mza_5512264877031055372.100x100-75.jpg"
   }
]

另外，我希望将jpg文件显示为图像。目前，它的文本值显示在html表中。

Answer 1

这会将JSON数据添加为表中的新行。

var rows = '';
for(var i=0;i<jsonObj.length;i++){
    rows += '<tr><td class="title">' + jsonObj[i].title + '</td><td class="logo_sm">' + jsonObj[i].logo_sm + '</td></tr>';
}
document.getElementsByTagName('table')[0].innerHTML += rows;

Answer 2

您正在迭代JSON对象，但是在每次迭代时，您将使用第i个对象替换行的innerHTML。
因此，它只显示JSON对象的最后一项。
只需获取表格并为每个项目插入一行。

var mytable = document.getElementById("tableid");
for(var i=0;i<jsonObj.length;i++){

    var myrow = mytable.insertRow(0);
    var mytitlecell = myrow.insertCell(0);
    var mylogocell = myrow.insertCell(1);
    mytitlecell.innerHTML = jsonObj[i].title;
    mylogocell.innerHTML = "<img src='"+jsonObj[i].logo_sm+"'/>";
}

如何显示通过从文件中读取的多行循环的html表

2 个答案: