Сгенерировать несколько элементов HTML из JSON с помощью JQuery?

Question

Как использовать JQuery и Javascript для извлечения JSON из $ ajax, а затем сделать foreach и создать строку, которая будет добавлена ​​в html DOM?

Что-то вроде:

$(document).ready(function (e) { 

$.ajax({ 
    type: "POST", 
    url: "Companies/GetSearchRatios", 
    context: this, 
    success: function (data) { 
     //return JSON 
    } 
}); 

Результат JSON

[{"name":"MyNAme","value":350},{"name":"Hello","value":356}] 

Я могу легко Acces эти значения внутри метода $ Ajax успеха, но как я могу извлечь это значение за пределами метода и использовать его для добавления в DOM?

Это то, что мне нужно в результате некоторых для/Еогеаспа методы:

var $gElemRatios = 
    '<option value=""></option>' + 
    '<option value="350">MyNAme</option>' + 
    '<option value="356">Hello</option>'; 

Затем я использую этот вар объединить с другим:

var $gElem = 
    '<div class="cbox cboxQuarterWidth">' + 
     '<select id="combobox_0">' + 
       $gElemRatios + // here I add previous generated elem 
     '</select>' + 
    '</div>'; 

И, наконец:

$("#main").append($gElem); 

Любые идеи?

Answer 1

Вы можете использовать $.each Переберите данных, передаваемых в обработчик успеха:

$.ajax({ 
    type: "POST", 
    url: "Companies/GetSearchRatios", 
    context: this, 
    success: function (data) { 
     $.each(data,function(){ 
      console.log(this.name); //just an example how to access things 
      $('#select').text(this.value); //maybe? 
     }); 
    } 
}); 

Смотреть это fiddle