如何使用名称中包含空格的键创建foreach？

Question

我试图创建一个ko foreach来从外部JSON文件创建的可观察数组中提取数据。出于某种原因，提供JSON文件的程序的开发人员决定在一些字符串名称中使用空格，例如＆＃34;网络设备＆＃34;。 Knockout似乎在使用空格时遇到麻烦，即使我添加\或将其放在引号中也是如此。似乎还没有办法通过键的索引值来创建foreach。我怎样才能将空格添加到foreach中，或者重命名数组中有问题的值？

现在我的foreach代码以<!-- ko foreach: Network Devices -->开头，我还尝试了$index[12]和其他几个标识符，没有运气。

Answer 1

也许只是使用一些香草javascript：

var json = {
    "Network Devices": "yes",
    "Computer": ["keyboard", "mouse", "processor"],
    "Types of fruits": ["Apple", "Orange", "Banana"]
};
for ( var key in json ) {
    var obj = json[key];
    console.log(key,obj);
}

现在，您可以访问obj来操纵对象的那一部分。

如果必须，您可以对所有密钥进行编码，使其不包含空格。这会将"Network Devices"更改为"Network%20Devices"

var json = {
    "Network Devices": "yes",
    "Computer": ["keyboard", "mouse", "processor"],
    "Types of fruits": ["Apple", "Orange", "Banana"]
};
var new_object = {};
for ( var key in json ) {
    new_object[encodeURIComponent(key)] = json[key];
}
console.log(new_object);

在解码密钥时，请使用decodeURIComponent(key)

或者你可以用下划线替换空格："Network_Devices"

var new_object = {};
for ( var key in json ) {
    new_object[key.replace(' ','_')] = json[key];
}
console.log(new_object);

Answer 2

在数据绑定中使用括号表示法。使用$data来引用当前绑定上下文：

＆＃13;

＆＃13;

var myData = {
  "Weird Key": [1,2,3]
};

ko.applyBindings(myData);

＆＃13;

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

<!-- ko foreach: $data['Weird Key'] -->

  <div data-bind="text: $data"></div>

<!-- /ko -->

＆＃13;

＆＃13;

＆＃13;