jQuery：遍历ajax返回

Question

对 jQuery 非常陌生，不完全理解对象和数组之间的区别，所以如果我的术语不正确，我深表歉意 - 请纠正我！

我有一个成功的 PHP ajax 返回数组：

$.ajax({
    url: "......",
    dataType: "json",
    type: "GET",
    data: {
        start_date: start,
        end_date: end
    },
    success: function (res) {
        $.each(res, function( key, value ){
            $('#FoundEvents').append('<option value="'+ key +'">'+ value +'</option>');
        });
    }
});

这给了我每个选项标签中的 [object Object]。很明显，我正在处理一个对象而不是数组？所有数据都存在，我只是找不到正确的语法来访问它。如何从这一点迭代数组数据？

如果我正确理解我的控制台读数，则有 10 个“对象”，那么每个对象内部都有几个“键：值”。

感谢您的帮助！

更新

PHP 数组的结构如下： $arr = array(1 => array(key=>value), 2 => array(key=>value) ...)

我正在尝试访问值。

更新 2

这是我的新代码：

 $.each(res, function(index, item){
    $.each(item, function(key, value){
        if(key == "event_title")
        {
            Events.push({"event_title":value});
        }
    });
});
$.each(Events, function(index, value){
    $('#FoundEvents').append('<option value="'+ index +'">'+ Events.value +'</option>');
});

但不知何故，我的数组中仍有对象？我不明白为什么。我假设“价值”本身就是对象……我不介意，但需要知道如何提取数据。

Answer 1

places 中的 plenty 将有助于解释 Array 和 Object 之间的区别。简而言之，在 JavaScript 中，Array 是 Object 的 type。它继承了 Object 的所有属性，但具有额外的属性和方法，例如数字索引和推送/弹出。

当您说控制台中有 10 个对象时，您是指成功处理程序中 res 的内容吗？听起来您可能对res 中的每个元素都有一个嵌套对象。在不知道返回的 JSON 数据的结构的情况下，诊断问题有点棘手。

您可以在处理程序中发布执行console.log(res); 的输出吗？

更新

啊，所以你确实有嵌套对象作为响应。您可能需要像这样重构 PHP 数组：

$arr = array(1 => array(key=>"something", value=>"something's value"), 2 => array(key=>"something else", value=>"something else's value") ...)

然后，在你的成功处理程序的 each 函数中，你可以这样做：

$.each(res, function( index, item ){
  var key = item.key,
      val = item.value;

  $('#FoundEvents').append('<option value="'+ key +'">'+ value +'</option>');
});

更新 2

如果你真的不能改变 PHP 发送响应的方式，你可能需要做这样的事情。但是，如前所述，这似乎有点过头了，因为 res 数组中的对象只会有一个键/值对。

$(document).ready(function () {
    $.each(res, function(index, item) {
      $.each(item, function(key, value) {
        // do something with key and value
      });
    });
});

Answer 2

您正在迭代的数据可能有key 字段，但jQuery 不会为您解包。这就是为什么您得到 [object Object] 文本而不是实际值的原因。在将数据返回到网页之前，您应该像这样转换数据：

[{'key1': 'val1'}, {'key2': 'val2'}]

到

{'key1': 'val1', 'key2': 'val2'}

但如果你关心顺序（对象遍历顺序是任意的），你可以改为这样：

[{key: 'key1', value: 'val1'}, {key: 'key2', value: 'val2'}]

然后像这样访问数组中的数据：

 $('#FoundEvents').append('<option value="'+ obj.key +'">'+ obj.value +'</option>');

Answer 3

你快到了。回调函数中的第二个参数是数组或对象，第一个是对象属性的数组索引。您必须使用索引/属性来获取值。

尝试以下方法：

success: function (res) {
    $.each(res, function( key, value ){
        $('#FoundEvents').append('<option value="'+ key +'">'+ value[key] +'</option>');
    });
}

记下我的更改，即选项标签中的文本。

您也可以考虑将对象注销到控制台，以便检查结构，如下所示：

success: function (res) {
    $.each(res, function( key, value ){
        //The output can be found in developer console which is found in any modern browser.
        console.log(value);
        $('#FoundEvents').append('<option value="'+ key +'">'+ value[key] +'</option>');
    });
}