当 headers 是键和值的混合时，将数据从 json 附加到 table

Question

我有一个 objects 数组，我想将该数据添加到 HTML table，但我无法将其附加到 table 作为我的table 结构略显独特。

我的 headers 是键和值的混合，我希望能够获得它们相应的值来填充我的单元格。

我的代码：

let data = [{Date:"2021-03-22",device:"Phone",vendor:"Apple",value:11},{Date:"2021-03-22",device:"Phone",vendor:"Google",value:10},{Date:"2021-03-22",device:"Tablet",vendor:"Apple",value:45},{Date:"2021-03-22",device:"Tablet",vendor:"Google",value:57},{Date:"2021-03-22",device:"iOT",vendor:"Apple",value:33},{Date:"2021-03-22",device:"iOT",vendor:"Google",value:11},{Date:"2021-03-22",device:"Smart Watch",vendor:"Apple",value:17},{Date:"2021-03-22",device:"Smart Watch",vendor:"Google",value:25},{Date:"2021-03-29",device:"Phone",vendor:"Apple",value:9},{Date:"2021-03-29",device:"Phone",vendor:"Google",value:20},{Date:"2021-03-29",device:"Tablet",vendor:"Apple",value:23},{Date:"2021-03-29",device:"Tablet",vendor:"Google",value:15},{Date:"2021-03-29",device:"iOT",vendor:"Apple",value:11},{Date:"2021-03-29",device:"iOT",vendor:"Google",value:77},{Date:"2021-03-29",device:"Smart Watch",vendor:"Apple",value:38},{Date:"2021-03-29",device:"Smart Watch",vendor:"Google",value:80}];

let ths = ['device', 'vendor', '2021-03-22', '2021-03-29'];
ths.forEach(d => $(`#ths`).append(`<th id='${d}'>${d}</th>`));

data.forEach(d => {
  $(`#table_body`).append(`<tr class='my_rows'></tr>`);
  ['device', 'vendor'].forEach(x => $(`#table_body > tr:last`).append(`<td>${d[x]}</td>`));
  ['value'].forEach(y => {
    $(`.my_rows:last`).append(`<td>${d[y]}</td>`);
  });
});

table,
td,
th {
  border: 1px solid black;
}

#mytable {
  width: 100%;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='mytable'>
  <thead>
    <tr id='ths'></tr>
  </thead>
  <tbody id='table_body'></tbody>
</table>

如您所见，我的 table 正在垂直填充并将任何数据添加到 2021-03-29，而不是将所有数据添加到第一个日期列。

如何使我的数据看起来像：

device	vendor	2021-03-22	2021-03-29
Phone	Apple	11	10
Phone	Google	45	57
Tablet	Apple	33	11
Tablet	Google	17	25
iOt	Apple	9	20
iOt	Google	23	15
Smart Watch	Apple	11	77
Smart Watch	Google	38	80

Answer 1

嗯，基本上我要做的是将您拥有的数据转换为更简单的数据，这样我们就可以从：

[
  {
    "Date": "2021-03-22",
    "device": "Phone",
    "vendor": "Apple",
    "value": 11
  },
  {
    "Date": "2021-03-29",
    "device": "Phone",
    "vendor": "Apple",
    "value": 9
  },
  ....
]

像这样：

[
  {
    "2021-03-22": "11",
    "2021-03-29": "9",
    "device": "Phone",
    "vendor": "Apple",
    "value": 11
  }
  ....
]

这可以使用 reduce 实现并将其转换为对象，然后使用 Object.values() 我们可以转换数组。

此处您有使用与 table 相同的渲染器的工作解决方案。请注意，我将两个项目合并为一个，使用 date 作为键，value 将是该日期的值。

let data = [{
    "Date": "2021-03-22",
    "device": "Phone",
    "vendor": "Apple",
    "value": 11
  },
  {
    "Date": "2021-03-22",
    "device": "Phone",
    "vendor": "Google",
    "value": 10
  },
  {
    "Date": "2021-03-22",
    "device": "Tablet",
    "vendor": "Apple",
    "value": 45
  },
  {
    "Date": "2021-03-22",
    "device": "Tablet",
    "vendor": "Google",
    "value": 57
  },
  {
    "Date": "2021-03-22",
    "device": "iOT",
    "vendor": "Apple",
    "value": 33
  },
  {
    "Date": "2021-03-22",
    "device": "iOT",
    "vendor": "Google",
    "value": 11
  },
  {
    "Date": "2021-03-22",
    "device": "Smart Watch",
    "vendor": "Apple",
    "value": 17
  },
  {
    "Date": "2021-03-22",
    "device": "Smart Watch",
    "vendor": "Google",
    "value": 25
  },
  {
    "Date": "2021-03-29",
    "device": "Phone",
    "vendor": "Apple",
    "value": 9
  },
  {
    "Date": "2021-03-29",
    "device": "Phone",
    "vendor": "Google",
    "value": 20
  },
  {
    "Date": "2021-03-29",
    "device": "Tablet",
    "vendor": "Apple",
    "value": 23
  },
  {
    "Date": "2021-03-29",
    "device": "Tablet",
    "vendor": "Google",
    "value": 15
  },
  {
    "Date": "2021-03-29",
    "device": "iOT",
    "vendor": "Apple",
    "value": 11
  },
  {
    "Date": "2021-03-29",
    "device": "iOT",
    "vendor": "Google",
    "value": 77
  },
  {
    "Date": "2021-03-29",
    "device": "Smart Watch",
    "vendor": "Apple",
    "value": 38
  },
  {
    "Date": "2021-03-29",
    "device": "Smart Watch",
    "vendor": "Google",
    "value": 80
  }
];

let ths = ['device', 'vendor', '2021-03-22', '2021-03-29'];
ths.forEach(d => $(`#ths`).append(`<th id='${d}'>${d}</th>`));


const reducer = (accum, cv) => {
  const key = cv.vendor + cv.device;
  // if there isnt an entry we create a new one.
  if (!accum[key]) {
    accum[key] = {
      device: cv.device,
      vendor: cv.vendor,
      [cv.Date]: cv.value
    };
  } else {
    // we have an entry we just add the value for the date.
    accum[key][cv.Date] = cv.value
  }

  return accum;


}

const obj = data.reduce(reducer, {});
const newForm = Object.values(obj);

newForm.forEach(d => {
  $(`#table_body`).append(`<tr class='my_rows'></tr>`);
  ['device', 'vendor'].forEach(x => $(`#table_body > tr:last`).append(`<td>${d[x]}</td>`));
  ['2021-03-22', '2021-03-29'].forEach(y => {
    $(`.my_rows:last`).append(`<td>${d[y]}</td>`);
  });
})

table,
td,
th {
  border: 1px solid black;
}

#mytable {
  width: 100%;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='mytable'>
  <thead>
    <tr id='ths'></tr>
  </thead>
  <tbody id='table_body'></tbody>
</table>

当 headers 是键和值的混合时，将数据从 json 附加到 table

Append data to table from json when headers are a mix of the keys and values

javascript

arrays

jquery

html-table

ecmascript-6