Search code examples
jqueryhtmljsondatatablesgetjson

Push and index data from a second json file into dataTable


What i am trying to do is append data from a second json file into dataTable.

The issue i am having is appending the data into the table, Then the data for each row to be the same as the name in the row.

example:

Position             Name         Symbol       Price       MarketCap       Change7d
    1           Bitcoin dogecoin    btc       243.967     3490594447.55     -2.96
    2           Ripple dogecoin     xrp      0.0107266    342270269.453     13.28
    3           Litecoin dogecoin   ltc        2.9611     118992556.35      -0.05
    4           Dogecoin dogecoin   doge    0.000190396   19018726.9507     -5.09

Should look like:

Position             Name         Symbol       Price       MarketCap       Change7d
    1           Bitcoin bitcoin     btc       243.967     3490594447.55     -2.96
    2           Ripple riple        xrp      0.0107266    342270269.453     13.28
    3           Litecoin litecoin   ltc        2.9611     118992556.35      -0.05
    4           Dogecoin dogecoin   doge    0.000190396   19018726.9507     -5.09

The data for dogecoin should match bitcoin.

i have a Plunker to show more of what i am trying to do here Example Plunker

Thanks for any help on this issue im not even 100% sure if you can pass data like this.


Solution

  • You can do something like this

    $.getJSON("coin.json", function(json) {
        myTable
          .column(1)
          .nodes()
          .each(function(node, index, dt) {
            var slug = find(myTable.cell(node).data().name, json.coins);
            var item = $("<b></b>").html(slug.name);
            $(myTable.cell(node).node()).append(item);
        });
    });
    

    myTable.column(1).nodes() will iterate over each row in column 1. As it iterates search for the required object like this

    function find(key, obj) {
      for (var i in obj) {
        if (obj[i].name == key) {
          return obj[i];
        }
      }
      return null;
    }
    

    Here is a demo http://plnkr.co/edit/4ktGkmPd0dWTPpRkAWCO?p=preview