create two values in drop down list using data passed through JSON and jQuery

Question

I am passing HashMap using jQuery and JSON to JSP page. The values being returned to jQuery success function are as follows:

Formatted JSON Data

{  
   "tableBird1":[  
      "001",
      "Eurasian Collared-Dove"
   ],
   "tableBird2":[  
      "002",
      "Bald Eagle"
   ],
   "tableBird3":[  
      "003",
      "Cooper's Hawk"
   ]
}

I want to to populate a dropdown list based on these values where a dropdown contains two values.

Here is the code I am trying:

$.ajax({
        type:"GET",
        url: "url?",        
        data: { groupName: $('#groupNamesDD').val() },  // Data being passed through json from other drop down list
        dataType: "json",
        success: function(response){

        $.each(JSON.stringify(response), function(key,value) {     //  I get this exception here - Cannot use 'in' operator to search for '294' in
            var element = document.createElement("option");                 

            for(var i = 0; i < key.length; i++) {
              element.value= JSON.stringify(key);               
              element.data-value = JSON.stringify(key.value);    // here I get run time exception -  invalid left hand assignment 
              element.text=JSON.stringify(key.value);
              document.getElementById("displayColumnsDropDown").add(element);
            }
          });
        }

});

I want the output something like this:

<select id="displayColumnsDropDown" >
    <option value="">-- Select --</option>
    <option value="tableBird1" data-value="001" >001</option>
    <option value="tableBird1" data-value="Eurasian Collared-Dove" >Eurasian Collared-Dove</option>
    <option value="tableBird2" data-value="002" >002</option>
    <option value="tableBird2" data-value="Bald Eagle" >Bald Eagle</option>
    <option value="tableBird3" data-value="003" >003</option>
    <option value="tableBird3" data-value="Cooper's Hawk" >Cooper's Hawk</option>


</select>

I got the possible solution form this link Can an Option in a Select tag carry multiple values?

I don't know how to create more than one values for drop down list dynamically other than this way. Is there any other possible solution?

EDIT 1: Tried the following code:

$('#displayColumnsDropDown').append($('<option>', { value: key }).data-value(key.value).text(key.value));

In the second for loop of success method. I still get the same exception:

Cannot use 'in' operator to search for '805' in

Jagruti · Accepted Answer · 2018-05-21T09:04:40.600

I am answering my own question . It might help someone

var $select = $('#displayColumnsDropDown');
$.each(response,function(key,value) 
{  
        if(value instanceof Array)
        {
            for(var i=0;i<value.length;i++)                  
            {                            
                 $select.append('<option value=' + key + ' data-value= ' +value[i]+ '>' + value[i] + '</option>');
            }

        }
 });

Syntax of my HashMap what I am passing to through JSON is something like this:

Map<String, List<String>> listOfColumns  =new HashMap<String, List<String>>();

List is treated as Javascript Array which is taken as value in my jQuery loop.

Also I need not parse value ( which is response variable in my case )returned in success function because it is already being parsed for me. The reason for my exception was I was parsing it again. Thanks to all the previous answers on Stack Overflow.

create two values in drop down list using data passed through JSON and jQuery

1 Answers1