【问题标题】:Loop through object with nested $.each使用嵌套的 $.each 遍历对象
【发布时间】:2017-01-06 04:31:00
【问题描述】:

我在使用嵌套的 $.each 循环对象时遇到问题。对象是嵌套在rootObject下的一系列相同类型/类的对象。

对象

var rootObject ={};

rootObject.reportObject1.name = "reportObject1 Name";
rootObject.reportObject1.prop1 = "reportObject1 Prop1_Value";
rootObject.reportObject1.prop2 = "reportObject1 Prop2_Value";

rootObject.reportObject1.reportObjectA.name = "reportObjectA Name";
rootObject.reportObject1.reportObjectA.prop1 = "reportObjectA Prop1_Value";
rootObject.reportObject1.reportObjectA.prop2 = "reportObjectA Prop2_Value";

循环

$.each(rootObject, function(index0, value0){
  console.log(value0.name);

  $.each(value0, function(index1, value1){
    console.log(value1.name);
  }

}

问题

  1. value1.name 在循环中返回名称以外的对象属性。它似乎试图为 prop1 和 prop2 返回 value.name,导致“未定义”值。

  2. 在调试期间查看 value0 的值时,value0 在进入嵌套循环时似乎失去了它的值。即console.log(value1.name),value0,从父循环变成undefined;

  3. 在调试期间查看子循环 (index1, value1) 时,我看到 value1 现在等于 value0.name,index1 等于“名称”。

【问题讨论】:

    标签: javascript jquery loops object nested-loops


    【解决方案1】:

    你可以自动定义属性一个深层次,但对于两个你需要停止并实例化父:

    var rootObject ={};
    
    rootObject.reportObject1 = {}; // HERE
    rootObject.reportObject1.name = "reportObject1 Name";
    rootObject.reportObject1.prop1 = "reportObject1 Prop1_Value";
    rootObject.reportObject1.prop2 = "reportObject1 Prop2_Value";
    
    rootObject.reportObject1.reportObjectA = {}; // and HERE
    rootObject.reportObject1.reportObjectA.name = "reportObjectA Name";
    rootObject.reportObject1.reportObjectA.prop1 = "reportObjectA Prop1_Value";
    rootObject.reportObject1.reportObjectA.prop2 = "reportObjectA Prop2_Value";
    

    否则,这些属性实际上都不会被定义,从而导致您的undefined 结果。

    下一个问题是另一个语法问题:您在两个 $.each() 调用中缺少右括号:

    $.each(rootObject, function(index0, value0){
      console.log(value0.name);
    
      $.each(value0, function(index1, value1){
        console.log(value1.name);
      }); // HERE
    
    }); // and HERE
    

    通过这两个修复,您的控制台输出显示:

    reportObject1 Name
    undefined (x3)
    reportObjectA Name
    

    要获得正确的输出,或者至少是一些示例输出,您可以使用这个小宝石 (from here)。因为您的结构可能有两个以上的级别,所以在这里递归似乎是合适的。

    function enumerate(o,s){
    
        //if s isn't defined, set it to an empty string
        s = typeof s !== 'undefined' ? s : "";
    
        //iterate across o, passing keys as k and values as v
        $.each(o, function(k,v){
    
            //if v has nested depth
            if(typeof v == "object"){
    
                //write the key to the console
                console.log(s+k+": ");
    
                //recursively call enumerate on the nested properties
                enumerate(v,s+"  ");
    
            } else {
    
                //log the key & value
                console.log(s+k+": "+String(v));
            }
        });
    }
    

    如果你尝试enumerate(rootObject),你会得到:

    reportObject1: 
       name: reportObject1 Name
       prop1: reportObject1 Prop1_Value
       prop2: reportObject1 Prop2_Value
       reportObjectA: 
         name: reportObjectA Name
         prop1: reportObjectA Prop1_Value
         prop2: reportObjectA Prop2_Value
    

    【讨论】:

    • 1.澄清一下,我实际上是在使用构造函数实例化父级:rootObject.reportObject1.reportObjectA = new reportObject(); 当我使用 console.log 2 打印rootObject 时,我看到了值。我的代码中有右括号。我忘了在这个例子中输入它。
    • 2.我的代码中有右括号。我忘了在这个例子中输入它。
    • 3. undefined (x3) 来自哪里?这一点在我的结果中是准确的,但为什么要打印这些属性?
    • 枚举函数做到了!我需要解决它并确定那里发生了什么。谢谢!
    • 你有没有关于使用 javascript/jquery 提升自己的建议/参考?
    猜你喜欢
    • 2010-12-26
    • 2013-11-01
    • 2020-04-28
    • 2015-11-24
    • 2011-04-10
    • 1970-01-01
    • 2018-05-13
    • 1970-01-01
    相关资源
    最近更新 更多