將可觀察數組轉換為嵌套JSON

Question

我在將一系列信息正確存儲為JSON時遇到問題。

我擺弄一個小提琴來說明這個問題 。 輸入一組標簽並查看控制台以查看輸出。

更多說明：

因此，我有一個輸入，其中包含以逗號分隔的標記列表，然后將其格式化。

function createTagArray() {
   // given an input value of 'tag1, tag2, tag3'
   // returns array = ['tag1', 'tag2', 'tag3']
} 

我認為接下來需要做的是：在數組上循環並為每個項目創建一個“標簽”對象，其中還包括標簽的ID和與標簽關聯的聯系人的ID。

每個對象都被推到tags ，一個可觀察的數組。

function single_tag(id, contactId, tagLabel) {
    var self = this;

    self.id = id;
    self.contactId = contactId;
    self.tagLabel = tagLabel;
}

function createTags() {
  var array = createTagArray();

  for (var i = 0; i < array.length; i++) {
    self.tags().push(new single_tag(uuid.generate(), self.contactId, array[i]));
  }
}

然后，我將其轉換為JSON

self.contactInformation = function() {
  return ko.toJS({
    "id": self.contactId,
    "firstname": self.firstname(),
    "lastname": self.lastname(),
    ... other fields ...
    "tags": self.tags(),
  })
}

但是，當我檢查調用此函數的控制台輸出時，標簽是數組的集合，而不是漂亮的json對象。

如何正確格式化？

我嘗試了此建議 ，並且標簽json的結構正確，但它與轉義引號一起存儲，因此這似乎是錯誤的。

感謝您的所有幫助！

Answer 1

我建議您為KO使用基因敲除插件（knockout.mapping），它允許映射復雜的JSON結構來查看模型，即使沒有聲明也是如此。

從文檔中

假設您有一個如下所示的JavaScript對象：

var data = {
    name: 'Scot',
    children: [
        { id : 1, name : 'Alicw' }
    ]
}

您可以將其映射到視圖模型，而不會出現任何問題：

var viewModel = ko.mapping.fromJS(data);

現在，假設數據已更新為沒有任何錯字：

var data = {
    name: 'Scott',
    children: [
        { id : 1, name : 'Alice' }
    ]
}

這里發生了兩件事：名稱從Scot更改為Scott ， children [0] .name從Alicw更改為無錯字的Alice 。 您可以根據以下新數據更新viewModel：

ko.mapping.fromJS(data, viewModel);

而且名稱將按預期更改。 但是，在children數組中，子級（Alicw）將被完全刪除，並添加一個新的子級（Alice）。 這並不完全是您所期望的。 相反，您可能希望僅將子項的name屬性從Alicw更新為Alice，而不是替換整個子項！

...

要解決此問題，您可以指定映射插件應使用哪個鍵來確定對象是新對象還是舊對象。 您可以這樣設置：

var mapping = {
    'children': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);

Answer 2

在jsfiddle中，您使用的是Knockout 3.0，它不支持textInput。 這是在3.2中添加的。 要使用3.2版，您需要使用以下CDN： http ://cdnjs.com/libraries/knockout

您的裝訂中有打字錯誤。 應該submit sumbit 。

您的single_tag構造函數存在問題。 id未使用，因此我將其刪除：

function single_tag(contactId, tagLabel) {
    var self = this;

    self.contactId = contactId;
    self.tagLabel = tagLabel;
}

當前也未設置contactId，因為尚未將observable設置為值。

要轉換為JSON，您需要使用ko.toJSON而不是ko.toJS ：

self.contactInformation = function() {
    return ko.toJSON({
      "firstname": self.firstname(),
      "tags": self.tags(),
    })
}

現在，當控制台寫出一個數組時：

{
  "firstname":"test",
  "tags":[
    {"tagLabel":"test1"},
    {"tagLabel":"test2"},
    {"tagLabel":"test3"}
  ]
}

JsFiddle

Answer 3

所以我的問題比我意識到的更基本。 我正在使用JSON Server提供數據，並且正在從數據庫的兩個部分（聯系人和標簽）中提取信息。

當我嘗試更新標簽時，我試圖將其應用於數據庫中的聯系人JSON上不存在的屬性。 不過，分別發布標簽是可行的。