0

json 応答を html テーブルに表示しようとしています。フィールドの 1 つは、テーブルに表示したい画像です。私の現在のコードは、テーブル内のすべてではなく、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 に答える