jquery fill dropdown with json data

Question

I have the following jQuery code  I am able to get the following data from server    value   1   label   xyz      value   2   label   abc     How do I iterate over this and fill a select box with id combobox    ajax       type   POST       url    lt s url value   ajaxMethod action   gt        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        Also what is the difference between using  ajax and   getJSON

User · Answer

In most of the companies they required a common functionality for multiple dropdownlist for all the pages. Just call the functions or pass your (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>

User · Answer

Here is an example of code  that attempts to featch AJAX data from  Ajax  AjaxGetItemListHelp  URL  Upon success  it removes all items from dropdown list with id   OfferTransModel ItemID and then it fills it with new items based on AJAX call s result   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     lt option gt                                                                         lt  option gt    val this  ITEMID    html this  ITEMDESC                                            Returned AJAX result is expected to return data encoded as AJAX array  where each item contains ITEMID and ITEMDESC elements  For example                    ITEMID   13            ITEMDESC   About                        ITEMID   21            ITEMDESC   Contact            The OfferTransModel ItemID listbox is populated with above data and its code should look like    lt select id  OfferTransModel ItemID  name  OfferTransModel ItemID   gt       lt option value  13  gt About lt  option gt       lt option value  21  gt Contact lt  option gt   lt  select gt    When user selects About  form submits 13 as value for this field and 21 when user selects Contact and so on   Fell free to modify above code if your server returns URL in a different format

User · Answer

This should do the trick       parseJSON data msg   map function          return     lt option gt    val this value  text this label      appendTo   combobox      Here s the distinction between ajax and getJSON  from the jQuery documentation        getJSON  is a shorthand Ajax function  which is equivalent to     ajax     url  url    dataType   json     data  data    success  callback          EDIT  To be clear  part of the problem was that the server s response was returning a json object that looked like this          msg       value   1   label   xyz      value   2   label   abc            So that msg property needed to be parsed manually using   parseJSON

User · Answer

If your data is already in array form  it s really simple using jQuery      data msg  each function           alert this value        alert this label           this refers to the current item being iterated over       var option       lt option   gt          option attr  value   this value  text this label             myDropDown   append option           ajax   is more flexible than  getJSON   - for one  getJson is targeted specifically as a GET request to retrieve json  ajax   can request on any verb to get back any content type  although sometimes that s not useful   getJSON internally calls  ajax

[jquery] jquery fill dropdown with json data

Examples related to jquery

Examples related to json