1

ajaxで取得したJSONデータでテーブルを構築しようとしています。

 $.getJSON('http://localhost:8000/list' , function(data) {
        var tbl_body = '<div class="table-responsive"><table class="table table-hover"><tr><th>Description</th><th>Chez…&lt;/th><th></th><th></th></tr>';
        $.each(data, function() {
            var d = this[1];
            var tbl_row = "<td>" + d['title'] + "</td>";
            tbl_row += '<td><a href="#" data-html="true" data-toggle="popover" data-content="' + d['owner']['phone'] + '">' + d['owner']['name'] + '</a></td>';
            tbl_body += "<tr>"+tbl_row+"</tr>";
        });
        tbl_body += "</table></div>";
        console.log(tbl_body);
        $("#liste").html(tbl_body).text();
    });

JSON データは次のようになります。

[
  [
    0,
    {
      "title": "Why",
      "author": "How",
      "detailsUrl": null,
      "owner": {
        "name": "Ted",
        "email": "test@example.org",
        "phone": "098765645565"
      },
      "coverUrl": null,
      "history": [ 
      ]
    }
  ],
  [
    1,
    {
      "title": "Test",
      "author": "Test",
      "detailsUrl": null,
      "owner": {
        "name": "Fred",
        "email": "test@example.org",
        "phone": "98976567"
      },
      "coverUrl": null,
      "history": [
      ]
    }
  ]
]

しかし、テーブルで生成されたリンクをクリックしても何も起こりません。ブートストラップは手作業でプレーンな HTML を記述して動作するため、ブートストラップを正しく使用していると確信しています。逃げ方の問題だと思います。

4

1 に答える 1