Question

给定一个可观察的数组＆＃39; sampleList＆＃39;在viewModel中定义。

 [
   { 
     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内的键是动态的]。

Answer 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

Answer 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中的所有项目
使用项目
如果我们碰到一个物体就进入它
循环遍历对象中的所有原始值
创建该对象的裸对象
添加到数组供以后使用
当我们完成循环时，遍历我们之前创建的数组
其中的每个对象都以在循环开始时创建的项目延伸
将这些推入一个全新的阵列

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

我不知道我是否可以更好地解释它。

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

在表中显示动态挖空可观察数组

2 个答案: