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是更快的选择。现在，我如何递归遍历一个对象？我一直在研究这个小提琴并尝试实现递归for循环，但该循环不会从object属性中提取值。我很喜欢使用jq $ .each，但我不知道它是否适用于这种情况。

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

Answer 1

这是获取该键值的迭代器函数：

＆＃13;

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));
   });

});

＆＃13;

<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>

＆＃13;

希望你能从这里继续下去:)。

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

1 个答案: