如何将 JSON 内容放入 HTML 中的 <ul> 标签和表单中

Question

我将 java 映射转换为 JSON 映射（JSON 保存在文件中），如下所示：

{"Luigi":{"name":"Luigi","cf":"lg","pi":"123","telephone":"333","website":"site.it","sector":"Engineer","address":"Italy"},"Davide":{"name":"Davide","cf":"dvd","pi":"123456789","telephone":"755921","website":"mysite.it","sector":"Software developer","address":"Italy"}}

在我的 jsp 中，我有一个具有 JSON 映射相同字段的表单（姓名、cf、电话......）。

我会将 JSON 映射（Luigi 和 Davide）的所有键放入无序列表中。像那样：

<ul> 
    <li>Luigi</li> 
    <li>Davide</li>
</ul>

当我单击其中之一时，我希望将相应的值放入表单中。

我正在考虑使用 jQuery 来做到这一点。

更新，表单代码：

<form>                        
    <div class="form-group">
        <label class="form-control">Customer Name:</label>
        <input id="nameCustomer" class="form-control" type="text" placeholder="Name customer" autofocus>
    </div>
    <div class="form-group">
        <label class="form-control">Fiscal Code:</label>
        <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
    </div>
    <div class="form-group">
        <label class="form-control">VAT Number:</label>
        <input id="vat" class="form-control" type="text" placeholder="VAT number (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Phone:</label>
        <input id="telephone" class="form-control" type="text" placeholder="Phone number">
    </div>
    <div class="form-group">
        <label class="form-control">E-Mail:</label>
        <input id="email" class="form-control" type="text" placeholder="E-Mail address">
    </div>
    <div class="form-group">
        <label class="form-control">Website:</label>
        <input id="website" class="form-control" type="text" placeholder="Customer's Website (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Address:</label>
        <input id="address" class="form-control" type="text" placeholder="Customer's Address">
    </div>
    <div class="form-group">
        <label class="form-control">Sector:</label>
        <input id="sector" class="form-control" type="text" placeholder="Sector">
    </div>
    <input id="createCustomer" type="button" class="btn btn-default" style="text-align: center" value="Save Data" />
        <input class="btn btn-default" type="reset" value="Clear Form">
                    </form>

Answer 1

策略很简单：

1. 用于$.each()循环遍历对象，并将键插入无序列表中。在属性中插入键值data以供将来参考
2. 将点击事件绑定到列表项。从属性中检索键值data并循环访问与键关联的对象
3. 使用与用户关联的每个对象中的键值对填充由 ID 标识的表单输入

但请注意，输入 ID 与 JSON 文件中的某些键不匹配：

• name在 JSON 中，但nameCustomer在形式中。
• cf，pi存在于 JSON 表单中，但未映射到任何表单输入元素。

var userData = {
  "Luigi": {
    "name": "Luigi",
    "cf": "lg",
    "pi": "123",
    "telephone": "333",
    "website": "site.it",
    "sector": "Engineer",
    "address": "Italy"
  },
  "Davide": {
    "name": "Davide",
    "cf": "dvd",
    "pi": "123456789",
    "telephone": "755921",
    "website": "mysite.it",
    "sector": "Software developer",
    "address": "Italy"
  }
};

// Get usernames
$.each(userData, function(key, value) {
  $('#users').append('<li data-user="' + key + '">' + key + '</li>');
});


// Bind click event to list items
$(document).on('click', '#users > li', function() {
  var user = $(this).data('user');
  $.each(userData[user], function(key, value) {
    $('form').find('#' + key).val(value);
  });
});

#users li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="users"></ul>
<form>
  <div class="form-group">
    <label class="form-control">Customer Name:</label>
    <input id="nameCustomer" class="form-control" type="text" placeholder="Name customer" autofocus>
  </div>
  <div class="form-group">
    <label class="form-control">Fiscal Code:</label>
    <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
  </div>
  <div class="form-group">
    <label class="form-control">VAT Number:</label>
    <input id="vat" class="form-control" type="text" placeholder="VAT number (if available)">
  </div>
  <div class="form-group">
    <label class="form-control">Phone:</label>
    <input id="telephone" class="form-control" type="text" placeholder="Phone number">
  </div>
  <div class="form-group">
    <label class="form-control">E-Mail:</label>
    <input id="email" class="form-control" type="text" placeholder="E-Mail address">
  </div>
  <div class="form-group">
    <label class="form-control">Website:</label>
    <input id="website" class="form-control" type="text" placeholder="Customer's Website (if available)">
  </div>
  <div class="form-group">
    <label class="form-control">Address:</label>
    <input id="address" class="form-control" type="text" placeholder="Customer's Address">
  </div>
  <div class="form-group">
    <label class="form-control">Sector:</label>
    <input id="sector" class="form-control" type="text" placeholder="Sector">
  </div>
  <input id="createCustomer" type="button" class="btn btn-default" style="text-align: center" value="Save Data" />
  <input class="btn btn-default" type="reset" value="Clear Form">
</form>