将json对象结构转换为html输入元素
[英]Convert json object structure to html input elements
问题描述
我需要创建具有名称-value的动态隐藏元素以存储json对象。
对于此输入：
json_structure = {
'var_1':'value_1',
'var_2': {
'var_2_1':'value_2_1',
'var_2_2':'value_2_2'
},
'var_3': 'value_3'
};
应该有
<input type="hidden" name="var_1" value="value_1" />
<input type="hidden" name="var_2[var_2_1]" value="value_2_1" />
<input type="hidden" name="var_2[var_2_2]" value="value_2_2" />
<input type="hidden" name="var_3" value="value_3" />
EDIT1这是我的示例，但仅适用于一级对象。 对于多个级别，需要制作一个递归函数来构建entyre结构。
for(var key in json_structure ) {
if(json_structure .hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", json_structure [key]);
form.appendChild(hiddenField);
}
}
有没有办法做到这一点的javascript或jquery函数中做到这一点？
先感谢您！
2 个解决方案
解决方案1
3 已采纳 2017-12-13 09:05:13
您可以使用某种递归方法来生成输入代码，其中使用Object.keys和Array#forEach方法迭代对象属性。
var json_structure = { 'var_1': 'value_1', 'var_2': { 'var_2_1': 'value_2_1', 'var_2_2': 'value_2_2' }, 'var_3': 'value_3' }; // function forr generating input function genInput(obj, res, prefix) { // get all the object keys and iterate Object.keys(obj).forEach(function(k) { // generate the name with prefix var name = prefix ? prefix + '[' + k + ']' : k; // check property value is object // in case its object call the function recursively if (typeof obj[k] == 'object') // skip null by checking value is truthy obj[k] && genInput(obj[k], res, name); // else generate the input and push into the output array else res.push('<input type="hidden" name="' + name + '" value="' + obj[k] + '"/>') }) // finally return the array generated return res; } console.log( genInput(json_structure, []) )
为了生成DOM元素并进行更新，您可以将jQuery与上面的代码一起使用，或者与纯java一起使用，执行类似的操作。
var json_structure = { 'var_1': 'value_1', 'var_2': { 'var_2_1': 'value_2_1', 'var_2_2': 'value_2_2' }, 'var_3': 'value_3' }; function genInput(obj, form, prefix) { Object.keys(obj).forEach(function(k) { var name = prefix ? prefix + '[' + k + ']' : k; if (typeof obj[k] == 'object') { obj[k] && genInput(obj[k], form, name); } else { var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", name); hiddenField.setAttribute("value", obj[k]); form.appendChild(hiddenField); } }) } genInput(json_structure, document.getElementsByTagName('form')[0])
<form></form>
使用jQuery：
var json_structure = { 'var_1': 'value_1', 'var_2': { 'var_2_1': 'value_2_1', 'var_2_2': 'value_2_2' }, 'var_3': 'value_3' }; // function forr generating input function genInput(obj, res, prefix) { Object.keys(obj).forEach(function(k) { var name = prefix ? prefix + '[' + k + ']' : k; if (typeof obj[k] == 'object') obj[k] && genInput(obj[k], res, name); else res.push('<input type="hidden" name="' + name + '" value="' + obj[k] + '"/>') }) return res; } // append the array of html string $('form').append(genInput(json_structure, []))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form></form>
解决方案2
1 2017-12-13 10:30:56
在这种情况下，您实际上不需要jQuery。
这是一个略有不同的版本。
var json_structure = { 'var_1':'value_1', 'var_2': { 'var_2_1':'value_2_1', 'var_2_2':'value_2_2' }, 'var_3': 'value_3' }; function createHiddenInput(name, value) { var hiddenInput = document.createElement("input"); hiddenInput.setAttribute("type", "hidden"); hiddenInput.setAttribute("name", name); hiddenInput.setAttribute("value", value); document.body.appendChild(hiddenInput); console.log(hiddenInput); } function generateInputs(structure, prepend) { for (var propertyKey in structure) { if (structure.hasOwnProperty(propertyKey)) { var property = json_structure[propertyKey] if (typeof property === 'object') { generateInputs(property, propertyKey) } else { var name = prepend ? prepend + '[' + propertyKey + ']' : property; createHiddenInput(name, propertyKey) } } } } generateInputs(json_structure)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> </body> </html>
将 HTML DOM 结构转换为 JSON
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.