如何自动将 json 对象键与多维表单字段相关联？答案

【问题标题】：How can I automatically associate a json object key with a multidimensional form field?如何自动将 json 对象键与多维表单字段相关联？
【发布时间】：2016-05-21 02:23:22
【问题描述】：

我正在尝试根据是否存在同名的 json 数组键来动态填充表单字段。

这是通过对服务器的 ajax 调用返回的 json：

{
    "title":"My Item Title",
    "product_description":{  
       "1":{  
          "name":"My Item",
          "description":"My Description"
       }
    },
    "image":"main.jpg",
    "additional_image":[  
        {
           "image":"img1.jpg",
           "sort":1
        },
        {
           "image":"img2.jpg",
           "sort":2
        }
    ],
    "model":"123",
    "quantity":"1"
}

我的html表单是这样的：

<form>
    <input type="text" name="title"/>
    <input type="text" name="product_description[1][name]"/>
    <input type="text" name="product_description[1][description]"/>
    <input type="text" name="image"/>
    <input type="text" name="additional_image[0][image]"/>
    <input type="text" name="additional_image[0][sort]"/>
    <input type="text" name="additional_image[1][image]"/>
    <input type="text" name="additional_image[1][sort]"/>
    <input type="text" name="model"/>
    <input type="text" name="quantity"/>
</form>

而我目前的 javascript 是这样的。可能有比使用“for ...in”作为“key”更好的方法只返回父“product_description”结构而不是底层对象。我尝试检查对象，但它不是动态的。

$.ajax({
    url: 'path/to/callback',
    type: 'get',
    dataType: 'json',
    ...
    success: function(json) {
        for (var key in json) {
            if (json.hasOwnProperty(key)) {
                if (typeof(json[key]) == 'object') {
                    var obj = json[key];
                    for (var prop in obj) {
                        if (obj.hasOwnProperty(prop)) {
                            if (typeof(json[key]) == 'object') {
                                    var obj2 = obj[prop];
                                    for (var prop2 in obj2) {
                                        $('input[name="'+key+'['+prop+']['+obj[prop]+'['+prop2+']"]').val(json.key);
                                    }
                                }
                        }
                    }
                } else {
                    $('input[name="'+key+'"]').val(json.key);
                }
            }
        }
    }
});

【问题讨论】：

标签： javascript json forms loops multidimensional-array

【解决方案1】：

解决这个问题的一种方法是使用下划线的template 函数。

此函数允许您将 JSON 对象中的值注入到准备好的字符串中。对于您的解决方案，您可以通过创建一个虚拟字符串并使用模板函数从 JSON 中提取适当的值。

Example Plunkr here

完成所有工作的位是：

var fields = $('form input[type="text"]');
$.each(fields, function(idx, item) {
   item.value = _.template('<%=' + item.name + '%>')(json);
});

此代码采用输入字段： <input type="text" name="json.object.array[0].value"/> 并创建一个模板字符串：<%=json.object.array[0].value%>

然后它将该字符串传递给下划线，您将获得值:)

（不要忘记在您的 html 页面中包含下划线）

【讨论】：