淘汰赛：从数组中创建可观察对象答案

【问题标题】：Knockout: Make observable object from array淘汰赛：从数组中创建可观察对象
【发布时间】：2023-04-06 11:54:01
【问题描述】：

我认为这是一个非常简单的问题要解决......但显然不是。

我有一个服务器，它返回从数据库加载的对象列表 (Json)。作为优秀的数据库，所有这些对象都有一个独特的 id 属性：

{
    "stores": [
        {
            "id": "1f0",
            "name": "foo",
            "address": "foo is here street"
        },
        {
            "id": "2b4",
            "name": "bar",
            "address": "bar is here street"
        },
        {
            "id": "3b4",
            "name": "baz",
            "address": "baz is here street"
        }
    ]
}

这个想法很简单：我想创建一个 observable（我猜我实际上想要一个 observableArray），但我想要一个属性为 id 属性且值为整个store对象：

{
    "1f0": {
            "id": "1f0",
            "name": "foo",
            "address": "foo is here street"
         },
    "2b4": {
            "id": "2b4",
            "name": "bar",
            "address": "bar is here street"
         },
    "3b4": {
             "id": "3b4",
             "name": "baz",
             "address": "baz is here street"
         }
}

我不需要任何字段（id、name 或 address）作为可观察对象（所以我认为我不需要 mapping，对吗？）。我只是想知道如何创建该结构。

我试过了：

var self = this;
self.stores = ko.observableArray();
[ . . . ]
self.stores = ko.utils.arrayMap(
                                serverStores,
                                function(store){
                                    var retval = {};
                                    retval[store['_id']] = store;
                                    return retval;
                                });

但这使得self.stores 成为三个Object 中的一个：

[
    {
        "1f0": {
            "id": "1f0",
            "name": "foo",
            "address": "foo is here street"
         },
    },
    {
       "2b4": {
            "id": "2b4",
            "name": "bar",
            "address": "bar is here street"
       },
    },
    {
       "3b4": {
           "id": "3b4",
           "name": "baz",
           "address": "baz is here street"
       }
    }
]

这不是我想要的。

任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

当你使用映射时，所有属性都变得可观察

标签： javascript arrays object knockout.js

【解决方案1】：

你不会真的想map 它，因为它总是返回一个新数组。一种选择是循环遍历数组并构建一个对象，例如：

var serversAsObject = {};
ko.utils.arrayForEach(serverStores, function(store) {
    var id = store.id;

    if (id) {
         serversAsObject[id] = store;
    }
});

self.stores = ko.observable(serversAsObject);

【讨论】：