当标题是键和值的混合时，将数据从 json 附加到表

Posted 2023-05-09

【中文标题】当标题是键和值的混合时，将数据从 json 附加到表

【英文标题】：Append data to table from json when headers are a mix of the keys and values

【发布时间】：2021-08-08 02:19:01

【问题描述】：

我有一个对象数组，我想将这些数据添加到 html 表格中，但我无法将其附加到表格中，因为我的表格结构有点独特。

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

我的代码：

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>

如您所见，我的表格垂直填充并将任何数据添加到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

【参考方案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()，我们可以得到数组的转换。

在这里，您可以使用相同的表格渲染器获得有效的解决方案。 请注意，我将这两个项目合并为一个，使用 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>