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

【问题标题】：How can I create a foreach with a key that has a space in the name?如何使用名称中包含空格的键创建 foreach？
【发布时间】：2017-03-05 16:16:54
【问题描述】：

我正在尝试创建一个 ko foreach 从外部 JSON 文件创建的可观察数组中提取数据。出于某种原因，提供 JSON 文件的程序的开发人员决定在一些字符串名称中使用空格，例如“网络设备”。即使我添加 \s 或将其放在引号中，Knockout 似乎也遇到了空格问题。似乎也没有办法通过键的索引值创建一个 foreach 。如何将空格添加到 foreach，或重命名数组中的有问题的值？

现在我的 foreach 代码以  开头，我还尝试了 $index[12] 和其他几个标识符，但没有成功。

【问题讨论】：

您能添加一些您尝试过的代码吗？确保使用编辑器正确格式化，使其可读。

标签： arrays json knockout.js foreach

【解决方案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);

【讨论】：

【解决方案2】：

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

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

ko.applyBindings(myData);

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

【讨论】：