遍历数组中的对象并在JavaScript中创建单独的表

Question

Please help me create three different tables based on the region name, each table could have multiple fields based on data from backend. basically I need to create a title as region name and group all details as per region name.

For example:

Title of table:

New York
name | age
bob    26

chicago
name | age
bob    26
mick   25

Here is my array:

var details = [
  {
    "region": "chicago",
    "name": "bob",
    "age": 26
  },
  {
    "region": "chicago",
    "name": "mick",
    "age": 25 
  },{
    "region": "new york",
    "name": "tom",
    "age": 21,
    "status": "active"
  },
  {
    "region": "new jersey",
    "name": "gen",
    "age":22  
  },
  {
    "region": "new york",
    "name": "mike",
    "age": 29,
    "hobby": "ps"
  }  
]

Answer 1

If I understand your question correctly, (from the supplied data example) column names can be dynamic, the problem with that is that to construct a table from such data you need to know possible columns ahead, which basically means iterating over data twice.

var tables = {}, columns = [];

// first extract all possible column names, excluding region ofcourse
details.forEach((detail) => {
  Object.keys(detail).forEach((column) => {
    if (column !== "region" && columns.indexOf(column) === -1) {
      columns.push(column);
    }
  });
});

// then iterate over data and construct table rows
details.forEach((detail) => {
  var table = tables[detail.region] || (tables[detail.region] = []), row = {};
  columns.forEach((column) => row[column] = detail[column])
  table.push(row);
});

// after data has been grouped into tables just create simple table
// and add data rows.
$.each(tables, (regionName, rows) => {
  var table = $("<table/>");
  var regionNameRow = $("<tr/>");
  var columnsRow = $("<tr/>");
  var regionNameTh = $("<th colspan='" + columns.length + "'>" + regionName + "</td>");


  columns.forEach((column) => {
    columnsRow.append($("<th>").html(column));
  });

  regionNameRow.append(regionNameTh);
  table.append(regionNameRow);
  table.append(columnsRow);

  rows.forEach((row) => {
    var tableRow = $("<tr/>");
    $.each(row, (columnName, value) => {
      tableRow.append($("<td>").html(value || "-"));
    });
    table.append(tableRow);
  });


  $("#container").append(table);
  $("#container").append("<hr/>");
});

Here's a fiddle with the result https://jsfiddle.net/okqbq4r2/18/

Also you might need to added additional filtering step if you wish to exclude empty columns.

Answer 2

You can do something like this tho extract the data

var chicagoList = details.map(function(x) {

  if (x.region === 'chicago') {
      return {
        "name": x.name,
        "age": x.age
      };
    }
  });

Answer 3

So my answer might be a little long winded but you can go through the array, grab the unique regions, create tables dynamically and then append rows based on matching regions. Not the most elegant but it will get the job done. Code below and working jsfiddle here https://jsfiddle.net/brockdavis008/b69g3w3p/

$(function(){
 CreateTables();
})

function CreateTables(){
var uniqueRegions = []
$.each(details,function(index,item){
    if (($.inArray(item.region, uniqueRegions)) == -1){
  uniqueRegions.push(item.region);
  }
})
$.each(uniqueRegions,function(index,item){
var regionname = item.replace(" ","");
$("#data").append("<table id='"+regionname+"region'><th>Name</th><th>Age</th>")
});

$.each(details,function(index,item){
var tr = "<tr><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
var regionname = item.region.replace(" ","");
$("#"+regionname+"region").append(tr)

})
}

var details = [
  {
    "region": "chicago",
    "name": "bob",
    "age": 26
  },
  {
    "region": "chicago",
    "name": "mick",
    "age": 25 
  },{
    "region": "new york",
    "name": "tom",
    "age": 21,
    "status": "active"
  },
  {
    "region": "new jersey",
    "name": "gen",
    "age":22  
  },
  {
    "region": "new york",
    "name": "mike",
    "age": 29,
    "hobby": "ps"
  }  
]

Answer 4

You can reduce the details first into an array that has objects segregated into regions.

 const details = [{ "region": "chicago", "name": "bob", "age": 26 }, { "region": "chicago", "name": "mick", "age": 25 }, { "region": "new york", "name": "tom", "age": 21, "status": "active" }, { "region": "new jersey", "name": "gen", "age": 22 }, { "region": "new york", "name": "mike", "age": 29, "hobby": "ps" }]; const tableDetails = details.reduce((arr, item) => { const isRegionExisting = arr.some((detail) => detail.region === item.region); let region; if (isRegionExisting) { region = arr.find((detail) => detail.region === item.region); } else { region = { region: item.region, people: [] }; arr.push(region); } region.people.push({ name: item.name, age: item.age, }); return arr; }, []); tableDetails.forEach(generateTable); function generateTable({ region, people }) { const table = document.createElement('table'); const caption = table.appendChild(document.createElement('caption')); const thead = table.appendChild(document.createElement('thead')); const theadRow = thead.appendChild(document.createElement('tr')); const tbody = table.appendChild(document.createElement('tbody')); caption.innerText = region; Object.keys(people[0]).forEach((key) => { const th = theadRow.appendChild(document.createElement('th')); th.innerText = key; }); people.forEach((person) => { const tr = tbody.appendChild(document.createElement('tr')); Object.values(person).forEach((value) => { const td = tr.appendChild(document.createElement('td')); td.innerText = value; }); }); document.body.appendChild(table); } 

 * { margin: 0; padding: 0; } body { font: 14px/1.8 normal Helvetica, Arial, sans-serif; } table { border-collapse: collapse; margin: 10px 0; table-layout: fixed; width: 100%; } caption, th { font-weight: 600; text-transform: capitalize; } th, td { padding: 5px; text-align: center; } th { background: #eee; } tbody tr { border-bottom: 1px dotted #eee; } tbody tr:last-child { border-bottom: 0; }