Mettez en correspondance les données JSON imbriquées avec les observablesArray de Knockout.

Question

Nous avons un observableArray dans Knockout qui comprend plusieurs objets JSON. Sous chaque objet JSON, nous avons un tableau imbriqué qui doit être observable.

Knockout n'est pas en mesure d'observer les tableaux imbriqués dans chaque objet JSON, dans l'observableArray.

Est-il possible de mapper un tableau qui est déjà imbriqué dans un observableArray ?

Voici un exemple d'un objet JSON dans le observableArray .

Remarque : Nous devons rendre le tableau "attributeValues" observable.

{
    "attribute": {
        "id": 6,
        "name": "Some attribute name",
        "typeID": 5
    },
    "type": {
        "id": 5,
        "typeName": "list"
    },
    "attributeValues": [{
        "id": 10,
        "attributeID": 6,
        "value": "Some attribute value",
        "chosen": false
    }, {
        "id": 11,
        "attributeID": 6,
        "value": "Another attribute value",
        "chosen": false
    }, {
        "id": 12,
        "attributeID": 6,
        "value": "Third attribute value",
        "chosen": false
    }]
}

Voici le code que nous utilisons maintenant :

$.ajax({
    type: 'GET',
    url: '/JsonService',
    success: function (data) {
        avm.attributes(data.allAttributes);
    },
    dataType: 'json',
    traditional: true
});

function attributeViewModel() {
    var self = this;

    self.attributes = ko.observableArray([]);
}

var avm = new attributeViewModel();
ko.applyBindings(avm);

Answer 1

Une solution consisterait à définir une fonction constructrice supplémentaire pour envelopper chaque élément de l'élément attributs le tableau. Dans cette fonction, vous pouvez ensuite définir le Valeurs des attributs comme observable, comme illustré dans l'exemple suivant :

function AttributeValueViewModel (data) {
    var self = this;
    self.attribute = ko.observable(data.attribute);
    self.type = ko.observable(data.type);
    self.attributeValues = ko.observableArray(data.attributeValues);
}

function attributeViewModel() {
    var self = this;
    self.attributes = ko.observableArray([]);
    self.addList = function (list) {
        ko.utils.arrayForEach(list, function(item) {
            self.attributes.push(new AttributeValueViewModel(item));
        });
    };
}

var avm = new attributeViewModel();
ko.applyBindings(avm);
$.getJSON('url', function (list) { avm.addList(list); });