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映射相同字段的表单（name，cf，telephone ..）。

我想将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

策略很简单：

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

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

name，但表单中为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>

Answer 2

迭代您的JSON对象，然后为每个元素添加RewriteLog /var/log/apache2/rewrite.log RewriteLogLevel 5：

<li>

var jsonObject = '{"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"}}';

$(function() {
  $.each($.parseJSON(jsonObject), function(key,value){
    $("#myUl").append("<li>"+key+"</li>");
  });
});

Answer 3

使用jQuery和dna.js创建一个可点击的客户列表，每次点击都会填充HTML表单。

设置库：

<link rel=stylesheet href="https://cdn.jsdelivr.net/dna.js/latest/dna.css">
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/dna.js/latest/dna.min.js"></script>

创建两个模板（一个用于客户列表，一个用于表单）：

<ul> 
    <li id=customer class=dna-tempalte
       data-click=populateForm>~~name~~</li> 
</ul>
<div>
<form id=customer-form class=dna-template>                        
   <div class=form-group>
      <label class=form-control>Customer Name:</label>
      <input id=nameCustomer class=form-control
         placeholder="Name customer" autofocus value=~~name~~>
   </div>
   <div class=form-group>
      <label class=form-control>Fiscal Code:</label>
      <input id=fiscalCode class=form-control
         placeholder="Fiscal code" value=~~cf~~>
   </div>
   <div class=form-group>
      <label class=form-control>VAT Number:</label>
      <input id=vat class=form-control
         placeholder="VAT number (if available)" value=~~pi~~>
   </div>
   <div class=form-group>
      <label class=form-control>Phone:</label>
      <input id=telephone class=form-control
         placeholder="Phone number" value=~~telephone~~>
   </div>
   <input id=createCustomer type=button class="btn btn-default" value="Save Data">
   <input class="btn btn-default" type=reset value="Clear Form">
</form>
</div>

在JavaScript中，将原始JSON转换为数组以便于处理并填写模板：

var raw = {"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"}};
function customer(name) { return raw[name]; }
var customers = Object.keys(raw).map(customer);  //convert to array

function populateForm(elem) {  //called on each click
   var model = dna.getModel(elem);
   dna.clone('customer-form', model, { empty: true });
   }
dna.clone('customer', customers);  //clickable customer list

请注意，我是dna.js的贡献者。

摆弄代码：
http://jsfiddle.net/ggphr0ro/5/

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

3 个答案: