Jquery fill dropdown с данными json

У меня есть следующий код jQuery. Я могу получить следующие данные с сервера [{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]. Как я перебираю это и заполняю поле выбора с помощью id=combobox

$.ajax({
    type: 'POST',
    url: "<s:url value="/ajaxMethod.action"/>",
    data:$("#locid").serialize(),
    success: function(data) {
        alert(data.msg);

                //NEED TO ITERATE data.msg AND FILL A DROP DOWN
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    dataType: "json"
});

В чем же разница между использованием .ajax и $.getJSON.

Ответы

Ответ 1

Это должно сделать трюк:

$($.parseJSON(data.msg)).map(function () {
    return $('<option>').val(this.value).text(this.label);
}).appendTo('#combobox');

Здесь различие между ajax и getJSON (из документации jQuery):

[getJSON] - это сокращенная функция Ajax, которая эквивалентна:
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

EDIT. Чтобы быть ясным, часть проблемы заключалась в том, что ответ сервера возвращал объект json, который выглядел следующим образом:

{
    "msg": '[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]'
}

... Чтобы свойство msg нужно было разобрать вручную с помощью $.parseJSON().

Ответ 2

Если ваши данные уже находятся в форме массива, это очень просто, используя jQuery:

 $(data.msg).each(function()
 {
     alert(this.value);
     alert(this.label);

     //this refers to the current item being iterated over

     var option = $('<option />');
     option.attr('value', this.value).text(this.label);

     $('#myDropDown').append(option);
 });

.ajax() более гибкий, чем .getJSON() - для одного, getJson нацелен именно как запрос GET для извлечения json; ajax() может запрашивать на любом глаголе, чтобы вернуть какой-либо тип содержимого (хотя иногда это не полезно). getJSON внутренне вызывает .ajax().

Ответ 3

Вот пример кода, который пытается зафиксировать данные AJAX с /Ajax/_AjaxGetItemListHelp/ URL. После успеха он удаляет все элементы из раскрывающегося списка с помощью id= OfferTransModel_ItemID, а затем заполняет его новыми элементами на основе результата вызова AJAX:

if (productgrpid != 0) {    
    $.ajax({
        type: "POST",
        url: "/Ajax/_AjaxGetItemListHelp/",
        data:{text:"sam",OfferTransModel_ItemGrpid:productgrpid},
        contentType: "application/json",              
        dataType: "json",
        success: function (data) {
            $("#OfferTransModel_ItemID").empty();

            $.each(data, function () {
                $("#OfferTransModel_ItemID").append($("<option>                                                      
                </option>").val(this['ITEMID']).html(this['ITEMDESC']));
            });
        }
    });
}

Ожидается, что возвращенный результат AJAX вернет данные, закодированные как массив AJAX, где каждый элемент содержит элементы ITEMID и ITEMDESC. Например:

{
    {
        "ITEMID":"13",
        "ITEMDESC":"About"
    },
    {
        "ITEMID":"21",
        "ITEMDESC":"Contact"
    }
}

В списке OfferTransModel_ItemID заполняются вышеуказанные данные, и его код должен выглядеть так:

<select id="OfferTransModel_ItemID" name="OfferTransModel[ItemID]">
    <option value="13">About</option>
    <option value="21">Contact</option>
</select>

Когда пользователь выбирает About, форма отправляет 13 как значение для этого поля и 21, когда пользователь выбирает Contact и т.д.

Невозможно изменить код выше, если ваш сервер возвращает URL-адрес в другом формате.

Ответ 4

В большинстве компаний им требовался общий функционал для нескольких выпадающих списков для всех страниц. Просто вызовите функции или передайте свой (DropDownID, JsonData, KeyValue, textValue)

    <script>

        $(document).ready(function(){

            GetData('DLState',data,'stateid','statename');
        });

        var data = [{"stateid" : "1","statename" : "Mumbai"},
                    {"stateid" : "2","statename" : "Panjab"},
                    {"stateid" : "3","statename" : "Pune"},
                     {"stateid" : "4","statename" : "Nagpur"},
                     {"stateid" : "5","statename" : "kanpur"}];

        var Did=document.getElementById("DLState");

        function GetData(Did,data,valkey,textkey){
          var str= "";
          for (var i = 0; i <data.length ; i++){

            console.log(data);


            str+= "<option value='" + data[i][valkey] + "'>" + data[i][textkey] + "</option>";

          }
          $("#"+Did).append(str);
        };    </script>

</head>
<body>
  <select id="DLState">
  </select>
</body>
</html>