jQuery AJAX set data multiple or single data to each field - json

Question

I have AJAX/JSON operation that calls a PHP endpoint.
I'm getting data from database and need to set it to each field.
Here is the Ajax code:
$.ajax(
{
url: "loadEquipmentDetails",
type: "POST",
data:
{
equipmentID: equipmentIDValue
},
success: function(jsonStr)
{
var data = JSON.parse(jsonStr);
var item1Len = data.item1Name.length;
$('#equipmentIDFilter').val(data.equipmentID);
$('#equipmentNameFilter').val(data.equipmentName);
for(var i=0; i<item1Len; i++)
{
var item1Name = data[i].item1Name;
alert(item1Name);
var newOption = $('<option>baba</option>');
$('#item1IDFilter').append(newOption);
}
}
});
As you can see on above code, for this:
$('#equipmentIDFilter').val(data.equipmentID);
$('#equipmentNameFilter').val(data.equipmentName);
Working good, the value can be set to that ID.
But why the value is not show on below:
var newOption = $('<option>baba</option>');
$('#item1IDFilter').append(newOption);
I try to alert it alert(item1Name) but there is no result/pop up.
Response result:

Answer 1

There is a problem with the logic of your loop.
var item1Len = data.item1Name.length;
later on you have
for(var i=0; i<item1Len; i++)
{
var item1Name = data[i].item1Name;
alert(item1Name);
var newOption = $('<option>baba</option>');
$('#item1IDFilter').append(newOption);
}
which assumes that data is an array, and each item has a key item1Name
I could only make assumptions of how your data looks like but I imagine it would have to be something like
for(var i=0, iMax = data.options.length; i<iMax; i++)
{
if(data.options[i].hasOwnProperty('item1Name')) {
var item1Name = data.options[i].item1Name;
var newOption = $('<option>${item1Name}</option>');
$('#item1IDFilter').append(newOption);
}
}
UPDATE: after the json was added to the question
if (data.hasOwnProperty('item1Name')) {
for (var i = 0, iMax = data.item1Name.length; i < iMax; i++) {
var item1Name = data.item1Name[i];
var newOption = $('<option>${item1Name}</option>');
$('#item1IDFilter').append(newOption);
}
}