javascript - 将嵌套对象数据添加到表单

Question

我正在将数据从可以是多层的对象添加到表单。

表单示例

<form id="myForm">
    <input name="foo" />
    <input name="bar" />
</form>

数据示例

var myData = {
    level1: {
        foo: 'hello',
        level2: {
            bar: 'greetings'
        }
    }
}

向表单添加数据

$.each(data, function (i, e) {
    var field = $('[name="' + i + '"]');
    if (field.is('input')) field.val(e);
});

现在显然这行不通，所以我有两个选择。

A)展平对象

var myResult = {
  level1 : '',
  foo : 'hello',
  level2 : '',
  bar : 'greetings'
}

B) 递归遍历对象

但我认为即使做 A，我也需要做 B。所以B是更快的选择。现在，我如何递归地遍历一个对象？我一直在研究这个 fiddle 并试图实现一个递归 for 循环，但该循环不会从对象属性中提取值。我被 jq $.each 宠坏了，但我不知道它是否适用于这种情况。

http://jsfiddle.net/6d7L9qpw/1/

Answer 1

这是一个迭代器函数，用于获取该键值:

var myData = {
level1: {
    foo: 'hello',
    level2: {
        bar: 'greetings'
    }
}
}


function recIterator(object, inputKey) {
    for(var key in object) {
        if(typeof object[key] == "object") {
            return recIterator(object[key], inputKey);
        } else {
            if(key==inputKey) {
                 return object[key];   
            }
        }
    }
}

$(function() {
    
   $("input[type=text]").each(function(ele) {
      var key = $(this).attr("name");
      $(this).val(recIterator(myData, key));
   });

});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<form id="myForm">
<input name="foo" type="text" />
<input name="bar"  type="text"  />
</form>

希望你能从这里继续:)