Сформировать dropdowlist с JSON данных

Question

У меня есть данные JSON, как это:

var data = [ 
     {ID:"1", Name: "a", ParentID: 0}, 
     {ID:"2", Name: "b", ParentID: 0}, 
     {ID:"3", Name: "c", ParentID: 0}, 
     {ID:"4", Name: "aa", ParentID: 1}, 
     {ID:"5", Name: "aaa", ParentID: 1}, 
     {ID:"6", Name: "bb", ParentID: 2}, 
     {ID:"7", Name: "cc", ParentID: 3}, 
     {ID:"8", Name: "bbb", ParentID: 2}, 
     {ID:"9", Name: "ccc", ParentID: 3}, 
     {ID:"10", Name: "bbbb", ParentID: 2}, 
     {ID:"11", Name: "cccc", ParentID: 3} 
    ] 

Я хочу использовать Javascript Jquery для создания в DropDownList. Примечание: сортировать базы данных по ParentID ех: ID = ParentID

{ID:"1", Name: "a", ParentID: 0}, 
     {ID:"4", Name: "aa", ParentID: 1}, 
     {ID:"5", Name: "aaa", ParentID: 1} 

Я ожидаю, что результат, как это:

<select> 
    <option value="1">a</option> 
    <option value="4">aa</option> 
    <option value="5">aaa</option> 
    <option value="2">b</option> 
    <option value="6">bb</option> 
    <option value="8">bbb</option> 
    <option value="10">bbbb</option> 
    <option value="3">c</option> 
    <option value="7">cc</option> 
    <option value="9">ccc</option> 
    <option value="11">cccc</option> 
</select> 

Как я могу сделать?

Спасибо,

Answer 1

Использовать примечание массива json, например.

var data = [ 
    {ID:"1", Name: "a", ParentID: 0}, 
    {ID:"2", Name: "b", ParentID: 0} 
]; 

Если вы используете JQuery ...

if(data.length){ 
    var elem = $('<select>'); 
    $.each(data, function(key,value){ 
     elem.append($("<option></option>") 
     .attr("value",value.ID) 
     .text(value.Name)); 
    }); 

    $('body').append(elem); 
} 

Answer 2

Вот, попробуйте это. Просто сделать данные массив и удалить Запятая:

var data = [ 
     {ID:"1", Name: "a", ParentID: 0}, 
     {ID:"2", Name: "b", ParentID: 0}, 
     {ID:"3", Name: "c", ParentID: 0}, 
     {ID:"4", Name: "aa", ParentID: 1}, 
     {ID:"5", Name: "aaa", ParentID: 1}, 
     {ID:"6", Name: "bb", ParentID: 2}, 
     {ID:"7", Name: "cc", ParentID: 3}, 
     {ID:"8", Name: "bbb", ParentID: 2}, 
     {ID:"9", Name: "ccc", ParentID: 3}, 
     {ID:"10", Name: "bbbb", ParentID: 2}, 
     {ID:"11", Name: "cccc", ParentID: 3} 
    ], 
    selectHtml, 
    optionArr = []; 

optionArr.push('<select>'); 
for (var i = 0, il = data.length; i < il; i++) { 
    optionArr.push('<option value="' + data[i].ID + '">' + data[i].Name + '</option>'); 
} 
optionArr.push('</select>'); 
selectHtml = optionArr.join(''); 
console.log(selectHtml); 

Answer 3

Сделайте ваши данные массив объектов:

var data = [ 
    {ID:"1", Name: "a", ParentID: 0}, 
    {ID:"2", Name: "b", ParentID: 0}, ... 
]; 

Сортировать данные, основанные на ParentID: 0, 1, 1, 0, 2, 2 , 2, 0, 3, 3, 3

var sorted = []; 
for(var i = 0; i < 4; i ++) { 
    sorted[i] = data.filter(function(datum) { 
    return datum.ParentID === i; 
    }); 
} 
//each sorted[index] contains an array having same ParentIDs 
var zeroes = sorted.splice(0, 1)[0]; //remove the first array which contains objects with ParentID === 0 

у пустого выбора элемента в разметке:

<select id="data"></select> 

Создайте option из каждого элемента данных и добавьте его в select.

zeroes.forEach(function(z, index) { //iterate over objects with ParentID === 0 
    addOption(z); 
    sorted[index].forEach(function(datum) { //iterate over non-zero ParentIDs 
     addOption(datum); 
    }); 
}); 

function addOption(obj) { 
    var option = $('<option></option>').attr('value', obj.ID).text(obj.Name); 
    $('#data').append(option); 
} 

Updated JSFiddle

Answer 4

Вы также можете сделать это шаблон Jquery.

предпосылками

jquery.tmpl.min.js. Скачать с here

HTML

<select id="selectmenu"></select> 

Шаблон

Подготовьте шаблон, который вы хотите повторить. Его работы как шаблон элемента.

<script id="optionTemplate" type="text/x-jquery-tmpl"> 
    <option value='${ID}'>${Name}</option> 
</script> 

Javascript Данные, полученные вами не так. Это нужно в массиве.

var data = 
[{ID:"1", Name: "a", ParentID: 0}, 
{ID:"2", Name: "b", ParentID: 0}, 
{ID:"3", Name: "c", ParentID: 0}, 
{ID:"4", Name: "aa", ParentID: 1}, 
{ID:"5", Name: "aaa", ParentID: 1}, 
{ID:"6", Name: "bb", ParentID: 2}, 
{ID:"7", Name: "cc", ParentID: 3}, 
{ID:"8", Name: "bbb", ParentID: 2}, 
{ID:"9", Name: "ccc", ParentID: 3}, 
{ID:"10", Name: "bbbb", ParentID: 2}, 
{ID:"11", Name: "cccc", ParentID: 3}]; 

JQuery Чтобы создать список из шаблона и данных, вы должны использоваться метод Tmpl().

$('#optionTemplate').tmpl(data).appendTo('#selectmenu'); 

Объяснение

optionTemplate: имя шаблона элемента

selectmenu: это идентификатор выбора управления HTML

данные: это массив JavaScript

Выходные

ЗАКАНЧИВАТЬ fiddle demo

Запросы приветствуются!