jQuery淘汰賽-分配json數據以選擇選項

Question

我有一個簡單的選擇下拉列表，我想從json數據中填充。 當我將json數據硬編碼為嵌入式javascript時，它可以工作，但是當我嘗試使用JQuery的getJSON回調來檢索數據時，它不會填充select。 我檢查了Web網址是否正常，並返回了正確的json結果，我相信我的調用順序不正確。

我已經嘗試搜索，並且給出了很多示例，例如，將json結果分配給全局變量。

下面的HTML：

<select data-bind="options: options, optionsText: 'name', optionsValue: 'name'"></select>

JS（適用於嵌入式jsondata）如下：

var jsdata = [{"id":1,"name":"Fruits","products":[{"id":1,"name":"Banana","price":0.99,"catid":1},{"id":2,"name":"Apple","price":0.49,"catid":1},{"id":3,"name":"Orange","price":0.69,"catid":1}]},{"id":2,"name":"Beverage","products":[{"id":4,"name":"Coca Cola","price":1.99,"catid":2},{"id":5,"name":"Dr. Pepper","price":1.89,"catid":2},{"id":6,"name":"Sprite","price":1.79,"catid":2},{"id":7,"name":"Mountain Dew","price":1.69,"catid":2},{"id":8,"name":"7-Up","price":1.59,"catid":2}]},
              {"id":3,"name":"test","products":[]}];

var ViewModel = function (js) {
        var self = this;
        self.json = js;
        self.options = ko.toJS(js);      
}    
var vm = new ViewModel(jsdata);
ko.applyBindings(vm);

jsfiddler是@ http://jsfiddle.net/psteele/7vcqX/#

嘗試使用getJSON代替，但是沒有用：

$.getJSON("url-to-data", null, function(data) {       
   var ViewModel = function (js) {
        var self = this;
        self.json = js;
        self.options = ko.toJS(js);      
   }    
   var vm = new ViewModel(data);
   ko.applyBindings(vm);
});

還嘗試了：

var globaljson;
$.getJSON("url-to-data", null, function(data) {       
   globaljson = data;
});

var ViewModel = function (js) {
        var self = this;
        self.json = js;
        self.options = ko.toJS(js);      
   }    
   var vm = new ViewModel(globaljson);
   ko.applyBindings(vm);

Answer 1

根據淘汰賽文檔 ，您應該使用數組作為select選項。 因此，嘗試類似：

jQuery.getJSON(url, function(data) {       
   var ViewModel = function (options) {
        var self = this;
        self.options = ko.observableArray($.map(options, function(key, value) { return { name: value, value: key } }));
   }    
   var vm = new ViewModel(data);
   ko.applyBindings(vm);
});

Answer 2

您應該使用一些不同的代碼來創建可觀察數組：

$.getJSON('your url', function(data) {
    var ViewModel = function(js) {
        var self = this;
        self.json = js;
        self.options = ko.observableArray($.map(js, function(item) { return { name: item.name, value: item.id } }));
    };
    var vm = new ViewModel(data);
    ko.applyBindings(vm);
});

演示