Question

所以当前我的代码从localstorage获取一个id列表，并将它们与json文件中的id进行比较，如果它们匹配，那么它将显示表中匹配的数据。

目前我的桌子只是堆叠而且我不确定如何正确地形成它。

下面是我制作的两张桌子的图片，第一张用html制作（是我的目标），第二张是我的代码的结果

代码：

$(document).ready(() => {

    $(".compareAll").click(function(e) {
console.log("click");
        //alert("this works");
       window.location.href = 'selection.html';
           })
        var CollectGameIds= JSON.parse(localStorage.getItem("selectedGameIds")); 
    console.log(CollectGameIds);
    $.getJSON("data/games.json", (newData) => {


    var selectedGames = newData.filter(function(game){
            //console.log(game.Name);
                if(CollectGameIds.indexOf(game.ID)!==-1){
                    console.log("true");
                    console.log(game.Name);
                    for (var i = 0; i < game.length; i++) {

                    }

                  document.getElementById("itemID").innerHTML += `<table class='table table-hover'>
  <thead>
  <tr>
        <th>  ${game.Name} </th>

  </tr>
  </thead>
   <tbody>
  <tr>
  <td> ${game.RetailPrice} </td>
    </tr>
  </tbody>

  </table>`;   

                } else {
                console.log("false");
                }
            })


            console.log(selectedGames);
    //})


        })

    })

Answer 1

您目前正在为每个游戏结果编写一个新表。您没有提供有关JSON结构的信息，因此我假设它如下所示：

[
    { ID: 1, Name: "one", RetailPrice: 12.99 },
    { ID: 2, Name: "two", RetailPrice: 12.99 },
    ...
]

正确的解析应该对数组进行两次评估，然后构建一个包含所有结果的行：

$.getJSON("data/games.json", (newData) => {

    var html = '<table class="table table-hover>';
    html += '<thead><tr>';

    for (var game of newData) {
        if (CollectGameIds.indexOf(game.ID) !== -1)
            html += '<td>' + game.Name + '</td>';
    }

    html += '</tr></thead>';
    html += '<tbody><tr>';

    for (var game of newData) {
        if (CollectGameIds.indexOf(game.ID) !== -1)
            html += '<td>' + game.RetailPrice + '</td>';
    }

    html += '</tr></tbody>';
    html += '</table>';

    $("#itemID").html(html);

})

此代码未经过测试，可以进一步优化，但应该可以使用。请告诉我。

生成从ajax / json生成的水平数据表

1 个答案: