如何將嵌套的JSON/C＃數組加載到視圖模型中？使用Knockout，jQuery

Question

SuperNoob在這裏，試圖加載不同的多個「選項」作爲一個字符串[]或對象，可以添加到使用Knockout購物車的「產品」:(從John Papa的PluralSight Knockout Change跟蹤的例子） 這裏是視圖：

<div> 
    <span>OptionsArray: </span> 
    <ul data-bind="foreach: optionsArray"> 
     <li data-bind="text: $data"></li> 
    </ul> 
</div> 

這裏是JSON轉換成C＃：

{Id = 4, ModelId = 1, SalePrice = 1.00, ListPrice = 1.00, Rating = 5, Photo = "smallCoffee.jpg", CategoryId = 1, ItemNumber = "smallCoffee", Description = "Small Coffee", Model = new Model(){ Name = "Small Coffee", Brand = "Tim Hortons", Id = 1 }, Category = drinkCat, Options = new Options(){Name = "Sugar"}, OptionsArray = new string[]{"Sugar", "Cream"}} 

該JavaScript功能工作，裝載JSON成產品的 「產品」 陣列，除了我可以讓它通過不同的多個選項來迭代每個產品。 這裏是視圖模型的功能部分：

loadProductsCallback = function (json) { 
      my.vm.tracker().markCurrentStateAsClean(); 
      $.each(json, function (i, p) { 
       products.push(new my.Product(selectedProduct)        
         .id(p.Id) 
         .salePrice(p.SalePrice) 
         .photo(p.Photo) 
         .category(new my.Category() 
         .id(p.Category.Id) 
         .name(p.Category.Name) 
          ) 
         .model(new my.Model() 
         .id(p.Model.Id) 
         .name(p.Model.Name) 
         .brand(p.Model.Brand) 
          ) 
         .options(new my.Options() 
         .name(p.Options.Name) 
          )        
         .description(p.Description) 
         .rating(p.Rating) 
         .stateHasChanged(false); 
         $.each(p.OptionsArray, function(i, o) { p.optionsArray.push(o);}); 
       ); 
      }); 

這裏是把所有的數據Product對象：

Product = function (selectedItem) { 
    var self = this; 
    self.id = ko.observable(); 
    self.salePrice = ko.observable(); 
    self.photo = ko.observable(); 
    self.model = ko.observable(); 
    self.options = ko.observable(); 
    self.optionsArray = ko.observableArray(["1", "2"]); 
    self.category = ko.observable(); 
    self.description = ko.observable(); 
    self.rating = ko.observable(); 
    self.isSelected = ko.computed(function() { 
     return selectedItem() === self; 
    }); 
    self.isDrink = ko.computed(function() { 
     return this.category() ? this.category().id() === 1 : false; 
    }, self), 
    self.isFood = ko.computed(function() { 
     return this.category() ? this.category().id() === 4 : false; 
    }, self), 

    self.shortDesc = ko.computed(function() { 
     return this.model() ? this.model().name() : ""; 
    }, self), 
    self.opt = ko.computed(function() { 
     return this.options() ? this.options().name() : ""; 
    }, self), 
    self.optQty = ko.computed(function() { 
     return this.options() ? this.options().qty() : ""; 
    }, self), 
    self.photoUrl = ko.computed(function() { 
     return photoPath + this.photo(); 
    }, self), 
    self.rating.subscribe(function() { 
     this.stateHasChanged(true); 
    }, self), 
    self.stateHasChanged = ko.observable(false); 
}; 

的loadProductsCallback功能工作除了部分添加嵌套罰款OptionsArray in。我試過一個嵌套的$ .each函數，只是簡單的.optionsArray（p.OptionsArray）。

還有很多代碼：我希望這足以說明問題。

尊敬的堆疊器，如何正確使用此函數將OptionsArray加載到Products對象中？

Answer 1

不知道我很理解你的代碼，但在這裏。

您正在創建一個產品，然後嘗試循環收集並將其映射到選項。除了將結果推送到源對象。

這是怎麼回事。

loadProductsCallback = function (json) { 
    my.vm.tracker().markCurrentStateAsClean(); 
    $.each(json, function (i, p) { 
     var newProduct = new my.Product(selectedProduct)        
       .id(p.Id) 
       .salePrice(p.SalePrice) 
       .photo(p.Photo) 
       .category(new my.Category() 
       .id(p.Category.Id) 
       .name(p.Category.Name) 
        ) 
       .model(new my.Model() 
       .id(p.Model.Id) 
       .name(p.Model.Name) 
       .brand(p.Model.Brand) 
        ) 
       .options(new my.Options() 
       .name(p.Options.Name) 
        )        
       .description(p.Description) 
       .rating(p.Rating) 
       .stateHasChanged(false); 
     $.each(p.OptionsArray, function(i, o) { 
      newProduct.optionsArray.push(o); 
     }); 

     products.push(newProduct); 
    }); 
} 

希望這會有所幫助。