如何自動將json對象鍵與多維表單字段關聯？

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”更好的方法，因為“鍵”僅返回父“ 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

解決此問題的一種方法是使用下划線的模板功能。

此功能使您可以將JSON對象中的值注入准備好的字符串中。 對於您的解決方案，您可以通過創建虛擬字符串並使用模板函數從JSON中提取適當的值。

此處為示例Plunkr

完成所有工作的部分是：

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頁面中包含下划線）