JSONテーブルにボタンを動的に追加する方法はありますか？

Question

私はJSONファイルの製品でいっぱいのテーブルを持っています。私は各製品のボタンを含む列を追加したいと思います。これを行う方法はありますか？

JSON構造：

{ 
    "products" : [ 
    { 
     "id" : "0", 
     "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - 
       UK-Layout", 
     "price" : "119.99", 
     "category" : "0", 
     "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical 
         Gaming Keyboard - Black.", 

HTML：テーブルの

<table id =myTable class="table table-bordered table-striped table-hover"> 
    <thead id = table> 
    <tr> 
    <th>ID</th> 
    <th>Name</th> 
    <th>Price</th> 
    <th>Description</th> 
    <th>Image</th> 
    <th id = "add">Add to Basket</th> 
    </thead> 
</table> 

コード：あなたが提供

$.getJSON('products.json', function(data){ 
    var items = []; 


    $.each(data.products, function(key, val){ 
    items.push("<tr data-category='"+val.category+"'>"); 
    items.push("<tr data-price='"+val.price+"'>"); 
    items.push("<td id=''"+key+"''>"+val.id+"</td>"); 
    items.push("<td id=''"+key+"''>"+val.name+"</td>"); 
    items.push("<td id=''"+key+"''>"+val.price+"</td>"); 
    items.push("<td id=''"+key+"''>"+val.description+"</td>"); 
    items.push("<td id=''"+key+"''>"+"<img src='"+val.images[0].src+"'width='150px'/></td>"); 


    }); 

    $("<tbody/>", {html:items.join("")}).appendTo("table"); 
}); 

Answer 1

マークアップは無効です。ヘッダーのtrは閉じられていません。奇妙なIDが入っています。 tbodyを追加してマークアップする必要はありません。あなたがこのテーブルを持っていると仮定しましょう：

<table id='myTable' class="table table-bordered table-striped table-hover"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Price</th> 
     <th>Description</th> 
     <th>Image</th> 
     <th>Add to Basket</th> 
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

は今、あなたが本当に欲しいものを製品ごとに行を追加することです。あなたの配列に2つのtrがあり、どちらもその文字列配列で正しく閉じられていません。私は単に2つではなく1つずつ行を作成しましたが、trを入れ子にする必要はありませんが、何らかの理由でそれを修正することはできますが、必要に応じて閉じる必要があります。

あなたはJSONが不完全であるため、イメージにJSONを提供していないので、私は簡単なものを試してテストし、いくつかの追加オブジェクトを追加してテストしました。

サンプルデータ：

var data = { 
    "products": [{ 
    "id": "0", 
    "name": "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout", 
    "price": "119.99", 
    "category": "0", 
    "description": "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.", 
    "images": "first" 
    }, { 
    "id": "1", 
    "name": "testa", 
    "price": "119.99", 
    "category": "2", 
    "description": "testa desc.", 
    "images": "afred" 
    }, { 
    "id": "2", 
    "name": "testb", 
    "price": "119.99", 
    "category": "2", 
    "description": "testb desc.", 
    "images": "bfred" 
    }] 
}; 

コード、説明するために冗長ビット：

function getprod(data) { 
    var items = []; 
    $.each(data.products, function(key, val) { 
    items.push("<tr data-category='" + val.category + "'"); 
    items.push(" id='" + key + "' data-price='" + val.price + "'>"); 
    items.push("<td class='row-id'>" + val.id + "</td>"); 
    items.push("<td class='row-name'>" + val.name + "</td>"); 
    items.push("<td class='row-price'>" + val.price + "</td>"); 
    items.push("<td class='row-description'>" + val.description + "</td>"); 
    items.push("<td><img alt='"+val.images+"' src='" +val.images+ "' width='150px'/></td>"); 
    items.push("<td><button type='button' class='cartbutton'>cart</button></td>"); 
    items.push("</tr>"); 
    }); 
    var tb = items.join(""); 
    console.log(tb); 
    $("#myTable").find('tbody').append(tb); 
} 
$('#myTable').on('click', '.cartbutton', function() { 
    var row = $(this).parents('tr'); 
    console.log(row.attr('id'), row.data('category'), row.data('price')); 
}); 
// I used a function to work with the sample data, you can revise that below: 
//$.getJSON('products.json',getprod); 
getprod(data);// remove for real call