How Do I dynamically populate JSON data on html input field using javascript?

Question

how do i populate these following JSON data on a html input field on the screen ? this is the json arraylist

[{
    "Bank Account Name": "State Bank",
    "Currency Code": "4000",
    "Deposit Date": "5/2/1794",
    "Payment Channel": "check",}]

i have stored this above data in a JSON file how do i get it on the screen?

<input type="text" id="BankAccountName" />
<input type="text" id="CurrencyCode" />
<input type="text" id="DepositDate" />
<input type="text" id="PaymentChannel" />

Visit this check if this help api.jquery.com/jquery.getjson

Amit Kumar
– Amit Kumar

2016-09-30 10:24:18 +00:00
Commented Sep 30, 2016 at 10:24 — Amit Kumar
– Amit Kumar, Commented Sep 30, 2016 at 10:24

brk · Accepted Answer · 2016-09-30 10:29:25Z

1

This is a very basic way of populating input fields with the relevant values

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'])

DEMO

Note: You have not referred how this json is loading. Is it in an external file or it is supplied through an api.

answered Sep 30, 2016 at 10:29

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

serge1peshcoff · Accepted Answer · 2016-09-30 10:30:06Z

0

Another approach:

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]
})

The benefits are you won't need to change anything if you will add some new fields to JSON.

answered Sep 30, 2016 at 10:30

serge1peshcoff

4,75011 gold badges48 silver badges80 bronze badges

Comments

vijayP · Accepted Answer · 2016-09-30 10:33:48Z

0

You can try below code:

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]);

    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="BankAccountName" />
<input type="text" id="CurrencyCode" />
<input type="text" id="DepositDate" />
<input type="text" id="PaymentChannel" />

answered Sep 30, 2016 at 10:33

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Comments

Dhaarani · Accepted Answer · 2016-09-30 10:42:10Z

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
processed:<div id='mything'></div>
<input type="text" id="BankAccountName" />
<input type="text" id="CurrencyCode" />
<input type="text" id="DepositDate" />
<input type="text" id="PaymentChannel" />

f00gasi · Accepted Answer · 2016-09-30 10:49:05Z

0

there you go, a quick jquery solution.

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);
});

edited Sep 30, 2016 at 10:49

answered Sep 30, 2016 at 10:42

f00gasi

12 bronze badges

Comments

subrahmanya bhat · Accepted Answer · 2016-09-30 11:09:31Z

0

You can iterate through json data and set the value of text field. `

 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;
});

edited Sep 30, 2016 at 11:09

answered Sep 30, 2016 at 11:04

subrahmanya bhat

5983 silver badges11 bronze badges

Collectives™ on Stack Overflow

How Do I dynamically populate JSON data on html input field using javascript?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest