如何使用分层 JSON 数据填充表单答案

【问题标题】：How can I populate a form using hierarchical JSON data如何使用分层 JSON 数据填充表单
【发布时间】：2012-12-06 22:22:01
【问题描述】：

我有一个需要用 JSON 数据填充的表单。该表单包含需要填充的 select、textarea 和 input 元素。 JSON 数据是复杂/分层的（即许多嵌套对象）。

我知道http://www.keyframesandcode.com/code/development/javascript/jquery-populate-plugin/，但它使用方括号表示法映射到字段名称（例如

<input name="person[name][last]" ...

我需要使用点表示法（例如

<input name="person.name.last" ...

我正在使用 jQuery，所以 jQuery 解决方案很好。谢谢。

【问题讨论】：

标签： json forms

【解决方案1】：

这是使用递归函数填充的一种组合替代方案：

function populator(json, nodes){
  $.each(json, function(key, value){
    newNodes = nodes ? nodes.slice() : [];
    newNodes.push(key);

    if (typeof(value)=="object") {
        populator(value, newNodes);
    else
        $('name["' + newNodes.join('.') + '"]').val(value);
    }
  });
}

你可以这样做：

populator({
             person: {
                name: {
                   last: 'Doe', 
                   first: 'John'
                },
                address: {
                   street: '123 Main Street',
                   city: 'Montgomery',
                   state: 'AL'
             }
          });

【讨论】：

感谢您的回答。顺便说一句，nodes.slice() 的目的是什么。没有参数的切片不是简单地返回原始数组吗？
不，它返回数组的克隆。该数组需要被克隆，因为它不能在节点的迭代中被修改。
一件事，这不适用于多项选择项（复选框列表、多项选择）。它需要一些调整才能使其工作，基本上是一个智能数组处理程序。