如何将JSON数据插入表单字段

时间：2019-02-05 07:38:32

标签： javascript jquery json

我有一个由dropdown和input fields组成的表格，某些字段是只读的。 我想做的是将JSON数据存储在表单字段中

我在这里

  • 分销商名称（下拉列表）
  • 用户名（下拉列表）
  • 用户代码（输入字段）
  • 登录ID（输入字段）
  • 密码（输入字段）

我有JSON 

    [
  {
    "Distributor": "maiyas",
    "Name": "admin",
    "User Code": "AAA01",
    "Login Id": "admin123",
    "password": "admin123"
  }
]

代码段 

function show(a) {
  var x = document.getElementById(a);
  var c = x.nextElementSibling
  if (x.getAttribute('type') == "password") {
    c.removeAttribute("class");
    c.setAttribute("class", "fas fa-eye");
    x.removeAttribute("type");
    x.setAttribute("type", "text");
  } else {
    x.removeAttribute("type");
    x.setAttribute('type', 'password');
    c.removeAttribute("class");
    c.setAttribute("class", "fas fa-eye-slash");
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testingForm">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3">
        <h5 id="commonHeader">Distributor Name</h5>
        <select id="myselect"></select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Name Of the user</h5>
        <select id="myselect"></select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">User Code</h5>
        <input type="text" id="userCode" name="usercode" class="commanClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Login Id</h5>
        <input type="text" id="loginId" name="loginid" class="commanClass" placeholder="Login Id" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Current Password</h5>
        <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password" readonly="readonly"> <i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"></i>
      </div>

    </div>
    <div>
      <hr>
      <br>
      <button type="submit" id="save" class="commonButton">Save</button>
      <button type="button" id="save" class="commonButton">Clear</button>
    </div>
  </div>

</form>

我正在数组中获取JSON对象，并希望将JSON数据显示到字段中。

2 个答案:

答案 0 :(得分：0)

尝试一下：

var resultJSONWithOneItem =  [
  {
    "Distributor": "maiyas",
    "Name": "admin",
    "User Code": "AAA01",
    "Login Id": "admin123",
    "password": "admin123"
   }
];

var resultJSONArray =  [
  {
    "Distributor": "maiyas",
    "Name": "admin",
    "User Code": "AAA01",
    "Login Id": "admin123",
    "password": "admin123"
  },
  {
    "Distributor": "maiyas_1",
    "Name": "admin_1",
    "User Code": "AAA01_1",
    "Login Id": "admin123_1",
    "password": "admin123_1"
  }, 
  {
    "Distributor": "maiyas_2",
    "Name": "admin_2",
    "User Code": "AAA01_2",
    "Login Id": "admin123_2",
    "password": "admin123_2"
  }
];
$(document).ready(function()
{  
    $('#myselect').val(resultJSONWithOneItem[0]['Distributor']);
    $('#userCode').val(resultJSONWithOneItem[0]['User Code']);
    $('#loginId').val(resultJSONWithOneItem[0]['Login Id']);
    $('#currentPass').val(resultJSONWithOneItem[0]['password']);  
    
    //If there was multi items for your drop down you can iterate them
    var s = $('#myselect');
    for (var i = 0; i <= resultJSONArray.length - 1; i++) {
			 $('<option />', {
					value: resultJSONArray[i].Distributor, text: resultJSONArray[i].Distributor
			 }).appendTo(s);
		} 
        //Set your expect value to drop down like $('#dropName').val('an item in drop down list');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testingForm">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3">
        <h5 id="commonHeader">Distributor Name</h5>
        <select id="myselect"></select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Name Of the user</h5>
        <select id="myselect"></select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">User Code</h5>
        <input type="text" id="userCode" name="usercode" class="commanClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Login Id</h5>
        <input type="text" id="loginId" name="loginid" class="commanClass" placeholder="Login Id" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Current Password</h5>
        <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password" readonly="readonly"> <i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"></i>
      </div>

    </div>
    <div>
      <hr>
      <br>
      <button type="submit" id="save" class="commonButton">Save</button>
      <button type="button" id="save" class="commonButton">Clear</button>
    </div>
  </div>

</form>

注意：
1-从我可以看到的角度来看，您的JSON项的属性有空间，因此您无法访问resultJSONWithOneItem[0].PropertyName之类的JSON项属性，因此您应按resultJSONWithOneItem[0]['User Code']之类的索引访问props。
2-如果存在多个数组，例如resultJSONArray，则应为DropDown元素迭代JSON，并在其中添加option，然后选择期望值，例如`

 //If there was mulyi items for your drop down you can iterate them
 var s = $('#myselect');
 for (var i = 0; i <= resultJSONArray.length - 1; i++) {
      $('<option />', {
            value: resultJSONArray[i].Distributor, text: resultJSONArray[i].Distributor
        }).appendTo(s);
 } 
 //s.val(resultJSONArray[0]['Distributer']);

3-您将两个DropDown定义为一个唯一ID为mySelect，这在HTML中是不正确的。

答案 1 :(得分：0)

不知道您真正想要的是什么-我猜类似下面的代码。

  1. JSON数据现在是一个对象，而不是对象数组。
  2. 表单字段名称现在等于JSON数据的键。
  3. 选择具有包括JSON数据中的内容在内的选项。

功能fillJsonData（）是您想要的。

无论如何，我希望密码不是保存的密码。切勿将密码另存为纯文本。

function fillJsonData () {
    var jsonData =
    {
        "Distributor": "maiyas",
        "Name": "admin",
        "UserCode": "AAA01",
        "LoginId": "admin123",
        "password": "admin123"
    };


    for (var key in jsonData) {
        $("#testingForm").find('[name="'+key+'"]').val(jsonData[key]);
    }
}

function show(a) {
  var x = document.getElementById(a);
  var c = x.nextElementSibling
  if (x.getAttribute('type') == "password") {
    c.removeAttribute("class");
    c.setAttribute("class", "fas fa-eye");
    x.removeAttribute("type");
    x.setAttribute("type", "text");
  } else {
    x.removeAttribute("type");
    x.setAttribute('type', 'password');
    c.removeAttribute("class");
    c.setAttribute("class", "fas fa-eye-slash");
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="fillJsonData(); return false;" href="#">click me for fill form</a>
<form id="testingForm">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3">
        <h5 id="commonHeader">Distributor Name</h5>
        <select name="Distributor" id="myselect">
            <option value="">..</option>
            <option value="foo">foo</option>
            <option value="bar">bar</option>
            <option value="maiyas">maiyas</option>
            <option value="admin">admin</option>
        </select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Name Of the user</h5>
        <select name="Name" id="myselect">
            <option value="">..</option>
            <option value="foo">foo</option>
            <option value="bar">bar</option>
            <option value="maiyas">maiyas</option>
            <option value="admin">admin</option>
        </select>
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">User Code</h5>
        <input type="text" id="userCode" name="UserCode" class="commanClass" placeholder="user Code" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Login Id</h5>
        <input type="text" id="LoginId" name="LoginId" class="commanClass" placeholder="Login Id" readonly="readonly">
      </div>
      <div class="col-lg-3">
        <h5 id="commonHeader">Current Password</h5>
        <input type="password" id="currentPass" name="password" class="commanClass" placeholder="Current Password" readonly="readonly"> <i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"></i>
      </div>

    </div>
    <div>
      <hr>
      <br>
      <button type="submit" id="save" class="commonButton">Save</button>
      <button type="button" id="save" class="commonButton">Clear</button>
    </div>
  </div>

</form>

相关问题
最新问题