負載多維JSON陣列的物體插到selectize.js

-4

欲這個JSON加載到selectize：負載多維JSON陣列的物體插到selectize.js

{"platforms": 

[{"id":32,"name":"Sega Saturn","slug":"saturn"}, 

{"id":14,"name":"Mac","slug":"mac"}, 

{"id":47,"name":"Virtual Console (Nintendo)","slug":"vc"}, 

{"id":34,"name":"Android","slug":"android"}, 

{"id":84,"name":"SG-1000","slug":"sg1000"}, 

{"id":58,"name":"Super Famicom","slug":"sfam"}, 

{"id":82,"name":"Web browser","slug":"browser"}] 

}

我想它操作非常類似於this example provided by the Selectize.js developers（不包括在各URL部分），除了明顯而不是使用我的json數據預先製作的ID和名稱。

任何幫助表示讚賞。

代碼我目前正在嘗試使用：

options: [ 
    for (var i = 0; i < platforms.platforms.length; i++) 
    { 
     var counter = platforms.platforms[i]; 
     {id: counter.id, title: counter.name}, 
     console.log(counter.name); 
    }

下面介紹一下JSON看起來在控制檯登錄時它像：

編輯：This is another example that I'm looking at as it uses JSON.

來源

2015-08-28 AllTheGoodNamesWereTaken

什麼是你的問題？ – klenium

我在解析特定的JSON到selectize選擇框時遇到問題。我想以此爲例。 – AllTheGoodNamesWereTaken

你是什麼意思？你有什麼「麻煩」？你有什麼嘗試使用？什麼是錯誤信息？圖像中出現了什麼問題？它看起來應該如此。 – klenium

您不能使用for insi數組/對象，當你聲明一個變量。 Javascript不是像PHP & HTML這樣的模板。您也錯過了.slug。試試這個：

var data = JSON.parse('{"platforms":[{"id":32,"name":"Sega Saturn","slug":"saturn"},{"id":14,"name":"Mac","slug":"mac"},{"id":47,"name":"Virtual Console (Nintendo)","slug":"vc"},{"id":34,"name":"Android","slug":"android"},{"id":84,"name":"SG-1000","slug":"sg1000"},{"id":58,"name":"Super Famicom","slug":"sfam"},{"id":82,"name":"Web browser","slug":"browser"}]}'); 
var options = []; 
$.each(data.platforms, function() 
{ 
    options.push({ 
     id: this.id, 
     title: this.name, 
     url: "hhtp://site.com/"+this.slug 
    }); 
}); 
var $select = $('#select-tools').selectize({ 
    maxItems: null, 
    valueField: 'id', 
    labelField: 'title', 
    searchField: 'title', 
    options: options, 
    create: false 
});

來源

2015-08-29 21:10:08 klenium

這似乎不起作用，但代碼很好。（沒有錯誤輸出）由於某種原因，Selectize.js不喜歡該代碼。它沒有自定義的CSS或JS加載，並且頁面只有一個空的選擇框。 – AllTheGoodNamesWereTaken

我用另一個例子更新了我的帖子，也故意忽略了「.slug」，因爲我不想對它做任何事情。我怎麼能讓它無所作爲？ – AllTheGoodNamesWereTaken

我不知道第二個例子應該做什麼，你想要做什麼。如果你有一個問題是一個真正的問題，請問問題，但我們無法弄清楚你想看到什麼，也不會爲你做這項工作。 – klenium

你顯示的代碼有幾個語法錯誤。你對JavaScript不太熟悉，是嗎？

@klenium在他的建議中都是正確的，並且顯示了可以自行運行的完整代碼。你應該去像Plunkr或JSFiddle這樣的網站，添加正確的導入，在那裏運行這個代碼，如果它沒有達到你的期望，把這裏的鏈接放到頁面上，這樣我們就可以檢查出什麼地方出了問題。

注：Selectize的一個感興趣的是，它可以讓幾乎任何數據，而無需預處理，所以代碼大概可以降低到（未經測試！）：

var $select = $('#select-tools').selectize({ 
    maxItems: null, 
    valueField: 'id', 
    labelField: 'title', 
    searchField: 'title', 
    options: data.platforms, // Just use the Json data as it is 
    create: false 
});

來源

2015-08-30 18:49:53 PhiLho

你是對的，我正在努力學習Javascript。因爲我覺得我更好地學習這種方式。我欣賞這個提示，經過審查klenium的代碼實際上工作，它只是我的HTML導致的問題。謝謝。 – AllTheGoodNamesWereTaken

負載多維JSON陣列的物體插到selectize.js

回答

相關問題