将 JSON 格式化为特定表

Question

Given this data:

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

I would like to create this 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>

using KnockoutJS such that the values are data-bound.

I modified an example here but can't seem to figure out how to do it: http://jsfiddle.net/ktqcvj4x/ I suspect it will involve pure computed functions to get distinct values

Answer 1

You could group the array based on Column and a nested group based on color.

 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)

This creates an object like this:

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

You can assign this to a computed property. You can also use 2 Set s to get the all the unique colors and columns .

HTML :

For the headers, loop through the columns and create td . Straightforward.

For the body, you need nested loops. For each item in colors , create a tr and for each item in columns , create a td . Use an alias in foreach so that it's easier to access properties from grouped computed property.

  <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>

Here's a working snippet. This works for any number of columns and colors in your array.

 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>