将嵌套对象数据添加到窗体中

Add nested object data to a form

本文关键字：窗体 添加 数据 嵌套 对象      更新时间：2023-09-26

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

表单示例

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

这里有一个迭代器函数来获取键值：

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>

希望你能从这里继续：）

相关文章：