如何使用循环提取数组中的json数据

How to extract json data in an array using a loop?

本文关键字：json 数据 数组 何使用 循环 提取      更新时间：2023-11-25

大家好，我有问题。我不知道如何解决它。我是ajax处理的初学者。我希望你能帮助我。

我有一个ajax数据的成功。我想把它放在一个数组中。因为我想把json数据放在选项选择框中。

这是我的代码：

我的控制器里有这个

$('#state').on('change',function(){
            var state_code = $('#state').val();
            var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';
            $.ajax({
                type: 'POST',
                url: city_url,
                data: '',
                dataType: 'json',
                async: false,
                success: function(i){
                    console.log(i)
                }
            });
        });

这是我需要使用json数据填充的选择框选项

<select id="city" name="city">
    <option value="">---Select City---</option>
</select>

这是json响应

[{"id":"1054","name":"Altavas"},{"id":"1055","name":"Balete"},{"id":"1056","name":"Banga"},{"id":"1057","name":"Batan"},{"id":"1058","name":"Buruanga"},{"id":"1059","name":"Ibajay"},{"id":"1060","name":"Kalibo"},{"id":"1061","name":"Lezo"},{"id":"1062","name":"Libacao"},{"id":"1063","name":"Madalag"},{"id":"1064","name":"Makato"},{"id":"1065","name":"Malay"},{"id":"1066","name":"Malinao"},{"id":"1067","name":"Nabas"},{"id":"1068","name":"New Washington"},{"id":"1069","name":"Numancia"},{"id":"1070","name":"Tangalan"}]

在我的控制台日志中，我有这个：

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
length: 12

proto：阵列[0]

如果我点击对象中的箭头，我会得到这个：

Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
id: "1028"
name: "Butuan City"
__proto__: Object
1: Object
id: "1029"
name: "Buenavista"
__proto__: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
length: 12
__proto__: Array[0]

这就是所有的家伙。谢谢

只需替换

success: function(i){
    console.log(i)
}

带有

success: function(data){
    $.each($.parseJSON(data),function(index,value){
        $('#city').append('<option value="'+value.id+'">'+value.name+'</option>');
    });
}

您的响应已经是一个数组。只需使用jQuery.each(i, function(index, item) {...}) 对其进行迭代

使用此-

$.each(i, function(key,val){
 $('#city').append("<option value='" + key + ">" + val + "</option>");
});

  function(i){
     $.each(i,function(index,value){ 
       $("#city").append("<option value='"+value.id+"'>"+value.name+"</option>")
     });
  }

不要使用append通过这个方法，每次在选择框上附加时，先生成一个字符串，然后在选择框中设置完整的html，它很快，然后附加

var str='';
$.each(i, function(index,value){
str +="<option value='"+value.id+"'>"+value.name+"</option>";

});
 $('#city').html(str);

当您console.log(i)时，我理解；你得到了正确的回应。现在，您需要做的是JSON.parse对象，然后在select选项上设置它。

根据我的经验，这是棘手的部分，因为选择选项不能由html自动设置。

因此，以下是一些可能有用的代码（如果您希望以某个内容为前缀）。

$(document).ready(function () {
    var size =    $('select').children('option').length;
    for (i=0;i<size;i++)
    {
        if ( $('select').children('option')[i].value === resultingObj.whatever)
        {
             $('select').children('option')[i].selected=true;
        }
    }
});

祝好运

尝试类似的东西

    $.ajax({
           type: 'POST',
           url: city_url,
           data: '',
           dataType: 'json',
           async: false,
           success: function(response){
            var resp_length = response.length;
            var option = '';
            for(var i = 0; i< resp_length;i++){
                option += '<option value="'+response[i].id+'">'+response[i].name+'</option>';
            }
            $('#city').append(option);//Opertation on DOM only one time.
           }
       });

使用以下脚本

$.ajax({
  ...
  ...
  success: function(response){
    var option = null;
    //iterate each json record
    $(response).each(function(index, record){
      //create option tag with value and record name
      option = $('<li>').attr('value', record.id).html(record.name);
      //append this option tag to select box
      $('#city').append(option);
    });
  }
});

首先将json解析为对象，然后使用$.each

success: function(i){
    json = JSON.parse(i);
    $.each(json,function(index,value){
        $('#city').append('<option value="'+value.id+'">'+value.name+'</option>');
    });
}

根据您的代码，我对其进行了修改，以实现您想要的功能。

success: function(i)
{
var resultingObj = JSON.parse(i);
    for(var iterator = 0; iterator < resultingObj.length; iterator++)
    {
        //perform actions
        $('#city').append('<option value="' + resultingObj[iterator].id + '">' + resultingObj[iterator].name + '</option>');
    }
}

试试这个-

var select=$('#city');
for (var j=0; j<i.length; j++)
{
   select.append('<option value="'+i[j].id+'">'+i[j].name+'</option>');
}
相关文章：