0

我正在尝试将 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 表中的文本值。

4

2 回答 2

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;
于 2013-07-21T05:03:47.600 回答
0

您正在遍历 JSON 对象，但在每次迭代中，您都将行的 innerHTML 替换为第 i 个对象。
因此它只会显示 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+"'/>";
}
于 2013-07-21T05:08:34.250 回答