将 JSON 格式设置为特定 table

Question

鉴于此数据：

[
    {
        'Column': 'A',
        'Value': 10,
        'Color': 'red'
    },
    {
        'Column': 'B',
        'Value': 25,
        'Color': 'blue'
    },
        {
        'Column': 'A',
        'Value': 4,
        'Color': 'blue'
    }
]

我想创建这个table

  <table>
    <thead><td>A</td><td>B</td></thead>
    <tr>
      <td><span color='red'>10</span></td>
      <td><span color='red'></span></td>
    </tr>
    <tr>
      <td><span color='blue'>4</span></td>
      <td><span color='blue'>25</span></td>
    </tr>
  </table>

使用 KnockoutJS 使值是数据绑定的。

我在这里修改了一个示例，但似乎无法弄清楚如何去做：http://jsfiddle.net/ktqcvj4x/ 我怀疑它会涉及纯计算函数来获得不同的值

Answer 1

您可以根据 Column 对数组进行分组，并根据颜色对嵌套组进行分组。

const array = [
  { Column: "A", Value: 10, Color: "red" },
  { Column: "B", Value: 25, Color: "blue" },
  { Column: "A", Value: 4, Color: "blue" },
]

const group = {}

for (const { Column, Value, Color } of array) {
  if (!group[Column]) 
    group[Column] = {};
    
  group[Column][Color] = Value;
}

console.log(group)

这会创建一个像这样的 object：

{
  "A": {
    "red": 10,
    "blue": 4
  },
  "B": {
    "blue": 25
  }
}

您可以将其分配给计算属性。您还可以使用 2 Sets 来获取所有唯一的 colors 和 columns.

HTML:

对于 headers，遍历 columns 并创建 td。直截了当。

对于 body，您需要嵌套循环。对于 colors 中的每一项，创建一个 tr，对于 columns 中的每一项，创建一个 td。使用 an alias in foreach 以便更容易从 grouped 计算的属性.

访问属性

  <tbody data-bind="foreach: { data: colors, as: 'color' }">
    <tr data-bind="foreach: { data: $root.columns, as: 'column' }">
      <td>
        <span data-bind="style: { color: color }, 
                         text: $root.grouped()[column][color]"></span>
      </td>
    </tr>
  </tbody>

这是一个工作片段。这适用于数组中任意数量的 columns 和 colors。

function viewModel(array) {
  this.array = ko.observableArray(array);
  this.columns = ko.observableArray([]);
  this.colors = ko.observableArray([]);
  
  this.grouped = ko.computed(_ => {
    const group = {},
          columns = new Set,
          colors = new Set;

    for (const { Column, Value, Color } of array) {
      columns.add(Column)
      colors.add(Color)
      
      if (!group[Column]) 
        group[Column] = {};
        
      group[Column][Color] = Value;
    }
    
    this.columns(Array.from(columns))
    this.colors(Array.from(colors))
    return group
  })
}

const v = new viewModel([
  { Column: "A", Value: 10, Color: "red" },
  { Column: "B", Value: 25, Color: "blue" },
  { Column: "A", Value: 4, Color: "blue" },
])

ko.applyBindings(v)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<table>
  <thead>
    <tr data-bind="foreach: columns">
      <td data-bind="text: $data"></td>
    </tr>
  </thead>
  <tbody data-bind="foreach: { data: colors, as: 'color' }">
    <tr data-bind="foreach: { data: $root.columns, as: 'column' }">
      <td>
        <span data-bind="style: { color: color }, 
                         text: $root.grouped()[column][color]"></span>
      </td>
    </tr>
  </tbody>
</table>

将 JSON 格式设置为特定 table

Format JSON to specific table

javascript

knockout.js