How to iterate multiple json data in jquery response

Question

I am getting multiple data from my JSON response like below.

WellNames   […]
0   {…}
id  56
well_name   AL HALL
api 34005205550000
1   {…}
id  498
well_name   BONTRAGER
api 34005233850000
2   {…}
id  499
well_name   BONTRAGER
api 34005233860000

I just want to iterate all data and append in select box having id result

i tried below code but getting undefined value in select tags.Please help me to display this values in my select tag.

Below is my jquery code

<script type="text/javascript">
 $("#clientname").on('change', function() { 
         ajaxRequest = $.ajax({
         url: '<?= Router::url(['controller' => 'Orders', 'action' => 'getWelldetails']) ?>',
             type: 'POST',
             data: {clientId: $("#clientname").val()},   
             dataType: "json",
            success: function(response) {
                $(response).each(function () {
                    $("<option value='" + response['id'] + "'>" + response['well_name'] + "</option>").appendTo('#result');
                });              
            },
            error: function(response) {         
            }
        });     

 });
 </script>

Answer 1

You need to loop through the WellNames property of your result, not on your result itself.

Also, you're not using jQuery each properly. Either use $.each or use a for loop:

for(let item of response.WellNames) {
    $("<option value='" + item.id + "'>" + item.well_name + "</option>").appendTo('#result');
}   

Answer 2

Yes its done from below changes which i forgot to write

$(response.WellNames).each(function (i,value) {
                    $("<option value='" + value['id'] + "'>" + value['well_name'] + " - " + value['api'] + "</option>").appendTo('#result');
                });

Answer 3

You need iterate on *WellNames* property of your response.

• Use hasOwnProperty so that you don't iterate on undefined property.

• I will not suggest to add elements directly to control in a loop. So create an array containing html of and then add it to the control.

  var arrHtml = []; for (var item of response.WellNames) { if (response.WellNames.hasOwnProperty(item)) { arrHtml.push("<option value='" + item.id + "'>" + item.well_name + "</option>"); } } $('#result').innerHtml = arrHtml.join();