title: Is there a way to dynamically add buttons to a JSON table?
body: <p>I have a table full of products from a JSON file. I would like to add a column which contains buttons for each product. Is there a way to do this?</p>
  
  <p>JSON structure:</p>
  
  <pre><code>{
    "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.",
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id =myTable class="table table-bordered table-striped table-hover"&gt;
    &lt;thead id = table&gt;
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Image&lt;/th&gt;
      &lt;th id = "add"&gt;Add to Basket&lt;/th&gt;
    &lt;/thead&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p>Code for table:</p>
  
  <pre><code>$.getJSON('products.json', function(data){
    var items = [];
  
  
    $.each(data.products, function(key, val){
      items.push("&lt;tr data-category='"+val.category+"'&gt;");
      items.push("&lt;tr data-price='"+val.price+"'&gt;");
      items.push("&lt;td id=''"+key+"''&gt;"+val.id+"&lt;/td&gt;");
      items.push("&lt;td id=''"+key+"''&gt;"+val.name+"&lt;/td&gt;");
      items.push("&lt;td id=''"+key+"''&gt;"+val.price+"&lt;/td&gt;");
      items.push("&lt;td id=''"+key+"''&gt;"+val.description+"&lt;/td&gt;");
      items.push("&lt;td id=''"+key+"''&gt;"+"&lt;img src='"+val.images[0].src+"'width='150px'/&gt;&lt;/td&gt;");
  
  
    });
  
    $("&lt;tbody/&gt;", {html:items.join("")}).appendTo("table");
  });
  </code></pre>