Question

const supply =[
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX01",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX01Q",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX10",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX10Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX02Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX03",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX03Q",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX30",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX30Q",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX04Q",VALUE:200}]

我正在尝试旋转上面的数组，以便以与下面的表格类似的方式输出它。我的第一个倾向是嵌套一个.foreach循环，并将它们分成单独的数组，然后解析它们。那是你会怎么做的？

我想学习一种将数组转换为可以生成所需表格样式的最佳方法。谢谢

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-9hbo{font-weight:bold;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-yw4l"></th>
    <th class="tg-amwm" colspan="2">A</th>
    <th class="tg-amwm" colspan="2">B</th>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-9hbo">Cat1</td>
    <td class="tg-9hbo">Cat2</td>
    <td class="tg-9hbo">Cat1</td>
    <td class="tg-9hbo">Cat2</td>
  </tr>
  <tr>
    <td class="tg-9hbo" rowspan="2">100</td>
    <td class="tg-yw4l">MX01</td>
    <td class="tg-yw4l">MX01Q</td>
    <td class="tg-yw4l">MX10</td>
    <td class="tg-yw4l">MX10Q</td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l">MX02Q</td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-9hbo" rowspan="2">200</td>
    <td class="tg-yw4l">MX03</td>
    <td class="tg-yw4l">MX03Q</td>
    <td class="tg-yw4l">MX30</td>
    <td class="tg-yw4l">MX30Q</td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l">MX04Q</td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>

Answer 1

const supply =[
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX01",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX01Q",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX10",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX10Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX02Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX03",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX03Q",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX30",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX30Q",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX04Q",VALUE:200}];

// get the list of unique families
var family = supply.map(function(item)
{
  return item.FAMILY;
}).filter(function(value, index, self)
{
  return self.indexOf(value) === index; // remove duplicates
});

// get the list of unique categories
var category = supply.map(function(item)
{
  return item.CATEGORY;
}).filter(function(value, index, self)
{
  return self.indexOf(value) === index; // remove duplicates
});

// get the list of unique values
var value = supply.map(function(item)
{
  return item.VALUE;
}).filter(function(value, index, self)
{
  return self.indexOf(value) === index; // remove duplicates
});

function getProduct(family, category, value)
{
  return supply.filter(function(item)
  {
    return item.FAMILY === family && item.CATEGORY === category && item.VALUE === value;
  }).map(function(item)
  {
    return item.PRODUCT;
  });
}

// build the header row with families
var rowFamily = '<tr><th>&nbsp;</th>' + family.map(function(item)
{
  return '<th colspan="' + category.length + '">' + item + '</th>';
}).join("") + '</tr>';

// build the subheader row with categories
var rowCategory = '<tr><th>&nbsp;</th>' + family.map(function(itemF)
{
  return category.map(function(itemC)
  {
    return '<th>' + itemC + '</th>';
  }).join("");
}).join("") + '</tr>';

// show 1 row for each value 
var rowValues = value.map(function(itemV)
{
  return '<tr><th>' + itemV + '</th>' + family.map(function(itemF)
  {
    return category.map(function(itemC)
    {
      return '<td>' + getProduct(itemF,itemC,itemV).join('<br>') + '</td>';
    }).join("");
  }).join("") + '</tr>';
}).join("");

// show them all in the table
document.getElementById('tbl').innerHTML = rowFamily + rowCategory + rowValues;

<table id="tbl" border=1 bordercolor=black cellspacing=0></table>

在JavaScript中旋转数组

1 个答案: