jQuery的每个功能不起作用

Question

我有以下我通过PHP传递的json数组。 PHP数组是-

<?php 
    $arrTestData = [
    1 => [
        'id' => '1',
        'name' => 'Written'
     ],
     2 => [
        'id' => '2',
        'name' => 'Verbal'
     ]
    ];
   $arrVariable = json_encode( $arrTestData );?>

我正在尝试像这样迭代JavaScript中的php数组-

<script>

    $(document).ready(function () {

        var response = '<?php echo $arrVariable; ?>';
        data = $.parseJSON(response);

         $.each(data,function(key,value) {
            console.log(data.key + " --- " +data.value);
        });
</script>

如果我打印数据的控制台，它会显示给我，但是在循环中无法正常工作。 但是在控制台中，它给了我undefined 。 我想要在数组中获得的值。

Answer 1

响应对象是一个数组，被放入名为data的变量中。 在$.each函数中，您尝试访问数组中的.key和.value项目。 但是数组没有这些值。

您应该在此处使用独立变量命名 .each回调具有的参数-即key和value 。 它们不是data 属性 ，而是独立变量：

     $.each(data,function(key,value) {
        console.log(key + " --- " + value);
    });

请注意，由于这些值是对象 ，因此将导致

1 --- [object Object]
2 --- [object Object]

如果还要迭代内部对象的键和值 ，请使用Object.entries ：

$.each(data,function(key,value) {
   Object.entries(value).forEach(([key, val]) => {
     console.log(key + ' --- ' + val);
   });
});

输出：

id --- 1
name --- Written
id --- 2
name --- Verbal

另外请注意，不需要像jQuery这样的大库就可以加载JSON。 您可以仅使用Vanilla JS轻松实现所有这些目标：

document.addEventListener('DOMContentLoaded', () => {
  const response = '<?php echo $arrVariable; ?>';
  const data = JSON.parse(response);
  Object.values(data).forEach((obj) => {
     Object.entries(obj).forEach(([key, val]) => {
       console.log(key + ' --- ' + val);
     });
  });
});

Answer 2

我这样尝试过，它有效！

for (var key in data) {
            if (data.hasOwnProperty(key)) {
                console.log(data[key]['id']);
                console.log(data[key]['name']);
            }
        }

Answer 3

另一个解决方案-

$.each(data,function(key,value) {
            console.log(key + " --- " + value.id + " --- " + value.name);
        });