create table html with list json data and add filter select dropdown

Question

i have json data lists which i want to transform into html table, then create a filter using select option which will dynamically display data along axis Anyone know how I should proceed?

var data = [
  '[{"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2}]',
  '[{"axe":"B","ville":"BIRMANIE","Poids":50,"PU":300,"SMPY":-33,"MoM":55}]',
  '[{"axe":"C","ville":"CROATIE","Poids":7,"PU":500,"SMPY":20,"MoM":35]',
  '[{"axe":"D","ville":"DANEMARK","Poids":78,"PU":600,"SMPY":156,"MoM":-49}]'
]

Answer 1

Yes, you can create a html table with use json values buy your json value looks like it's broken if you can replace it as below

var data  = [
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2},
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2},
  {"axe":"A","ville":"ANTARTIC","Poids":15,"PU":100,"SMPY":73,"MoM":2}
]

After apply my 2 functin you should get a html table inside a container div

function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var table = document.createElement('table');
for( var i = 0; i < data.length; i++ ) {

  var child = data[i];
  if(i === 0 ) {
    addHeaders(table, Object.keys(child));
  }
  var row = table.insertRow();
  Object.keys(child).forEach(function(k) {
    console.log(k);
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('container').appendChild(table);

html file

<div id="container"></div>

https://jsfiddle.net/9azh8e0q/ Demo