循环遍历多值数组答案

【问题标题】：Loop Through Multivalue Array循环遍历多值数组
【发布时间】：2013-03-25 00:04:06
【问题描述】：

首先抱歉，如果我的术语有误，请您纠正我吗？

我正在尝试遍历以下 javascript 数组。

        var pieData2 = [
            {
                label: 'wow',
                value: 30,
                color:"#F38630"
            },
            {
                label: 'wow2',
                value : 10,
                color : "#E0E4CC"
            },
            {
                label: 'wow3',
                value : 100,
                color : "#69D2E7"
            }

        ];

我正在尝试将标签和颜色写入单独的 div。我尝试了以下概念，但没有找到。

     $.each( pieData2[0], function( key, value ) {
       alert( key + ": " + value );
         });

【问题讨论】：

尝试删除[0]。
输出应该是什么？
你不需要指定它是一个“多值”数组，因为数组被设计成包含多个值；就叫它数组吧。

标签： javascript jquery arrays string object

【解决方案1】：

jQuery.each() 函数旨在遍历集合，例如数组中的元素或对象的属性。在您的情况下，它正在迭代一个对象数组。在您的代码中，pieData2 是您的数组，因此您希望将其作为第一个参数传递给$.each()。第二个参数是一个处理每次迭代的函数，它有两个参数：index 和 value（尽管你可以随意命名它们）。

$.each(pieData2, function(index, value) {
    // index will be 0, 1, 2
    // value will be equivalent to pieData2[0], pieData2[1], pieData2[2]
    console.log(value.label); // outputs wow, wow2, wow3
});

正如在另一个答案中使用的那样，您还可以使用 this 关键字来引用该迭代正在查看的元素，因此上述代码中的 this 和 value 是相同的。

【讨论】：

... console.log(value.value); // outputs wow, wow2, wow3 ... 不 .. 而是“30, 10, 100” ... :)
@AndreasNiedermair 你是对的，我看错了属性！

【解决方案2】：

http://jsfiddle.net/X5r8r/1119/

var pieData2 = [
            {
                label: 'wow',
                value: 30,
                color:"#F38630"
            },
            {
                label: 'wow2',
                value : 10,
                color : "#E0E4CC"
            },
            {
                label: 'wow3',
                value : 100,
                color : "#69D2E7"
            }

        ];

$.each( pieData2, function( key, value ) {
    alert( key + ": " + value['label'] +"  value: " + value['value']);
         });

【讨论】：

完美，回复也记录一下。

【解决方案3】：

每个都可以，但是您需要循环遍历 pieData2 而不是 pieData2 的第一个元素...

   $.each( pieData2, function() {
          alert( this.label + ": " + this.value );
     });

http://jsfiddle.net/3anAJ/

【讨论】：

【解决方案4】：

试试这个

$.each( pieData2, function(index) {
    alert("label = " +pieData2[index].label+ " color = " +pieData2[index].color);
});

【讨论】：

【解决方案5】：

你不需要 jQuery。在确实不需要 jQuery 的情况下，我真的不建议这样做。到时候就有点没意思了。尽可能使用常规 JS，在需要时使用 jQuery。

for (var i = 0; i < pieData2.length; i++) {
    alert(pieData2[i].label + ' : ' + pieData2[i].value);
}

如果你真的想使用 jQuery，因为 $.each 可以迭代数组和对象，你可以只用它来迭代数组并提醒每个。

这将遍历数组中的每个对象并提醒每个键、值对...

$.each(pieData2, function (key, obj) {
    alert(obj.label + ' : ' + obj.value);
});

如果您需要遍历数组和每个对象（如果您不知道长度），那么您可以这样做：

for (var i = 0; i < pieData2.length; i++) {
    for (var prop in pieData2[i]) {
        if (pieData2[i].hasOwnProperty(prop)) {
            alert(prop + ' : ' + pieData2[i][prop]);
        }
    }
}

或

$.each(pieData2, function(obj) {
    $.each(pieData2[obj], function(key, value) {
        alert(key + ' : ' + value);
    });
});

【讨论】：