使用Jquery從JSON生成多個HTML元素？

Question

如何使用Jquery和Javascript從$ ajax中提取JSON，然后執行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}]

我可以輕松地在$ ajax方法成功內訪問此值，但是如何在方法之外提取該值並將其附加到DOM？

由於某些for / foreach方法，這就是我需要的：

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

然后，我使用此var與另一個變量組合：

 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?
       });
    }
});

看到這個小提琴