Question

我正在尝试根据是否存在具有相同名称的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);
                }
            }
        }
    }
});

Answer 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页面中加入下划线）

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

1 个答案: