在表格中显示动态剔除可观察数组答案

【问题标题】：Display dynamic knockout observable array in table在表格中显示动态剔除可观察数组
【发布时间】：2015-01-02 16:50:03
【问题描述】：

给定一个在 viewModel 中定义的可观察数组“sampleList”。

 [
   { 
     name: abc, 
     age:  40,
     InterestLevel: {
        trekking: 50,
        hiking : 43
     }  
   },

  { 
     name: def, 
     age:  34,
     InterestLevel: {
       cricket: 55,
       cycling: 75
     }  
   }
 ]

如何使用 KO 自定义绑定或任何可能的最佳方式从上述数据生成下表。

-------------------------------------

name  age  Interest  InterestLevel
-------------------------------------

abc   40    trekking    50
abc   40    hiking      43
def   34    cricket     55
def   34    cycling     75

[请注意，InterestLevel 中的键是动态的]。

【问题讨论】：

标签： jquery json knockout.js

【解决方案1】：

首先，您必须对数据进行反规范化：

this.TableData = ko.computed(function()
    {
    var data = ko.unwrap(this.sampleList)
    var res = ko.observableArray();

    for (var i in data)
    {
        for (var il in data[i].InterestLevel)
        {
            var ild = data[i].InterestLevel[il];
            res.push({ name: data[i].name, age: data[i].age, Interest: il, InterestLevel: ild });
        }
    }

    return res;
}, this);

然后将你的表绑定到TableData():

<table>
    <thead>
        <tr>
             <td>Name</td>
             <td>Age</td>
             <td>Interest</td>
             <td>Interest Level</td>
        </tr>
    </thead>

    <tbody data-bind="foreach: TableData()">
        <tr>
             <td data-bind="text: name">Name</td>
             <td data-bind="text: age">Age</td>
             <td data-bind="text: Interest">Interest</td>
             <td data-bind="text: InterestLevel">Interest Level</td>                
        </tr>
    </tbody>
</table>

见Fiddle

【讨论】：

【解决方案2】：

好的，所以我弄错了。这是plnker

var jsonObj = [
   { 
     name: "abc", 
     age:  40,
     InterestLevel: {
        trekking: 50,
        hiking : 43
     }  
   },

  { 
     name: "def", 
     age:  34,
     InterestLevel: {
       cricket: 55,
       cycling: 75
     }  
   }
 ];

var newArr = [];
for (var i = 0; i < jsonObj.length; i++){
    var item = jsonObj[i];

    var newItem = {};
    var itemsToBeCreated = []; // holds new items that need to be created

    for (var key in item) {
        if (typeof item[key] !== "object") {
            newItem[key] = item[key]; // copy the new item
        } else {
          for (var deeperKey in item[key]) {
            var obj = {};
            obj[deeperKey] = item[key][deeperKey];
            itemsToBeCreated.push(obj);
          }
        }
    }

    for (var y = 0; y < itemsToBeCreated.length; y++) {
      newArr.push(_.extend(itemsToBeCreated[y], newItem))
    }
}

所以这有点难以解释。基本上：

遍历 jsonObj 中的所有项目
使用项目中的所有原始值创建一个新项目
如果我们撞到一个物体，就进入它
循环遍历对象中的所有原始值
创建该对象的裸对象
添加到数组中以备后用
当我们完成循环后，循环遍历我们之前创建的数组
其中的每个对象都与循环开始时创建的项目一起扩展
将这些推送到一个全新的数组中

我们的想法是，对于每个子对象，我们都会提取一个键和值，并将其转换为自己的对象。然后使用克隆的父对象（减去子对象），我们用克隆的父对象扩展单个对象，从而创建一个全新的行。

我不知道我能不能解释得更好。

我的解决方案适用于您拥有的任何具有单级子对象的对象。因此，如果您的模型发生变化，这应该仍然有效。

【讨论】：