淘汰赛-无法访问嵌套的JSON数据

Question

关于在Knockout中访问嵌套JSON的问题类似，但我无法解决。 我敢肯定这很简单。 如果可能的话，我想在没有剔除插件的情况下进行此操作。

编辑：

这是我整理的小提琴。 https://jsfiddle.net/ym0h4w49/14/

我无法像在我正在工作的站点上那样实际渲染dom，但是console.log显示了singleContact对象。 取消对self.tag的注释，以查看其如何损坏。

给定这个带有嵌套对象的JSON响应：

{
  "id": 1,
  "firstname": "Ina",
  "lastname": "Church",
  ... etc ...
  "registered": "2014-10-06T11:22:51 +05:00",
  "tags": [
    {
      "id": "t1",
      "contactId": 1,
      "tagLabel": "wguldin"
    }
  ]
}

我将如何访问此人的tags ？ 我已经尝试了以下方法。

function detailViewModel(contactID) {
  var self = this;
  self.contactID = ko.observable(contactID);
  self.contact = ko.observableArray([]);

  self.getContact = function(id) {
      $.ajax({
        type: 'GET',
        url: 'http://localhost:3000/contacts/' + id + '?_embed=tags&_embed=reminders',
        dataType: 'json',
        success: function(data) {
          var contactData = new singleContact(data);
          self.contact(contactData);
        }
      });
  }

  self.getContact(self.contactID());
};

此视图模型创建一个新的singleContact，该数据将按如下方式处理数据：

function singleContact(data) {
  var self = this;

  self.firstName = data.firstname;
  self.lastName = data.lastname;
  ...

  self.tags = ko.observableArray(ko.utils.arrayMap(self.tags, function(tag) {
      return new tag(tag.id, tag.contactID, tag.tagLabel);
  }));
};

我认为，然后应该将标签信息传递给此功能。

function tag(id, contactID, tagLabel) {
    var self = this;

    self.id = id;
    self.contactID = contactID;
    self.tagLabel = tagLabel;
}

但是，当我console.log singleContact时，一个奇怪的函数出现在tags值中。

我不确定这是否意味着它，但是它不会使用此标记在DOM中呈现：

<!-- ko foreach: contact -->
  <h1 data-bind="text: firstName"></h1>

  ...

  <!-- ko foreach: tags -->
  <p data-bind="text: tag.tagLabel"></p>
  <!-- /ko -->

<!-- /ko -->

谢谢！

Answer 1

试试这个

视图：

<!-- ko foreach: contact -->
  <h1 data-bind="text: firstName"></h1>
  <!-- ko foreach: tags -->
  <p data-bind="text:tagLabel"></p>
  <!-- /ko -->
<!-- /ko -->

viewModel：

var json = {
  "id": 1,
  "firstname": "Ina",
  "lastname": "Church",
  "registered": "2014-10-06T11:22:51 +05:00",
  "tags": [
    {
      "id": "t1",
      "contactId": 1,
      "tagLabel": "wguldin"
    }
  ]
}

function tag(id, contactID, tagLabel) {
    var self = this;
    self.id = id;
    self.contactID = contactID;
    self.tagLabel = tagLabel;
}

function singleContact(data) {
  var self = this;
  self.firstName = data.firstname;
  self.lastName = data.lastname;
    var con =  ko.utils.arrayMap(data.tags, function(item) { // use item rather tag which may give different meaning & loop through data.tags 
      return new tag(item.id, item.contactID, item.tagLabel);
  });
  self.tags = ko.observableArray(con); 
};

function detailViewModel() {
  var self = this;
  self.contact = ko.observableArray([]);
  self.contact([new singleContact(json)]); // use [] here to make it array
};
ko.applyBindings(new detailViewModel())

示例工作在这里摆弄

在这里查看您的工作提琴样本

Answer 2

我认为可以，我想您需要做的就是更改组合键

<!-- ko foreach: contact -->
  <h1 data-bind="text: firstName"></h1>

  ...

  <!-- ko foreach: tags() -->
  <p data-bind="text: tag().tagLabel"></p>
  <!-- /ko -->

<!-- /ko -->