解析json填充到html,如何使用javascript在html输入字段上动态填充JSON数据？

6 个答案:

答案 0 :(得分：1)

这是使用相关值填充输入字段的一种非常基本的方法

var jsonData = [{

"Bank Account Name": "State Bank",

"Currency Code": "4000",

"Deposit Date": "5/2/1794",

"Payment Channel": "check",}]

$("#BankAccountName").val(jsonData[0]['Bank Account Name']);

$("#CurrencyCode").val(jsonData[0]['Currency Code']);

$("#DepositDate").val(jsonData[0]['Deposit Date']);

$("#PaymentChannel").val(jsonData[0]['Payment Channel'])

注意：您尚未提及此json的加载方式。它是在外部文件中还是通过api提供。

答案 1 :(得分：0)

你去了，一个快速的jquery解决方案。

var json = [{

"Bank Account Name": "State Bank",

"Currency Code": "4000",

"Deposit Date": "5/2/1794",

"Payment Channel": "check"}];

$.each(json[0] , function (key, value){

key = key.replace(/ /g,'');

$('input[id='+key+']').val(value);

});

答案 2 :(得分：0)

另一种方法：

var json = [{

"Bank Account Name": "State Bank",

"Currency Code": "4000",

"Deposit Date": "5/2/1794",

"Payment Channel": "check",}]

Object.keys(json[0]).map(value => {

document.getElementById(value.replace(/ /g, "")).value = json[0][value]

})

如果您要向JSON添加一些新字段，则无需更改任何内容。

答案 3 :(得分：0)

您可以尝试以下代码：

var data = [{

"Bank Account Name": "State Bank",

"Currency Code": "4000",

"Deposit Date": "5/2/1794",

"Payment Channel": "check",

}];

$(document).ready(function() {

var jsonObj = data[0];

for (var key in jsonObj) {

if (jsonObj.hasOwnProperty(key)) {

$("#" + key.replace(/ /g, "")).val(jsonObj[key]);

}

}

})

答案 4 :(得分：0)

您可以遍历json数据并设置文本字段的值。

`

var data= [{

"Bank Account Name": "State Bank",

"Currency Code": "4000",

"Deposit Date": "5/2/1794",

"Payment Channel": "check",}];

$.each(data[0],function(key,value){

id=key.replace(" ","");

document.getElementById(id).value=value;

});

答案 5 :(得分：0)

＆＃13;

＆＃13;

var myvariable = [{"id":"15aea3fa","firstname":"John","lastname":"Doe"}];

$('#mything').text('id:'+myvariable[0].id+' name:'+myvariable[0].firstname+' '+myvariable[0].lastname);

var value=[{

"BankAccountName": "State Bank",

"CurrencyCode": "4000",

"DepositDate": "5/2/1794",

"PaymentChannel": "check",}];

$('#BankAccountName').val(value[0].BankAccountName);

$('#CurrencyCode').val(value[0].CurrencyCode);

$('#DepositDate').val(value[0].DepositDate);

$('#PaymentChannel').val(value[0].PaymentChannel);＆＃13;

processed:

＆＃13;＆＃13;＆＃13;