Javascript 如何将JSON内容放入<；ul>；HTML中的标记和表单_Javascript_Jquery_Html_Json

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

javascript jquery html json

Javascript 如何将JSON内容放入<；ul>；HTML中的标记和表单,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我将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":"mysit

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


客户名称：
财政代码：
增值税编号：
电话：
电邮：
网站：
地址:
部门：

迭代JSON对象，然后为每个元素添加一个

：

var jsonObject='{“Luigi”：{“name”：“Luigi”，“cf”：“lg”，“pi”：“123”，“电话”：“333”，“网站”：“site.it”，“sector”：“Engineer”，“address”：“Italy”}，“Davide”：“name”：“Davide”，“cf”：“dvd”，“pi”：“123456789”，“电话”：“755921”，“网站”：“mysite.it”，“sector”：“Software developer”，“address”：“Italy”}；
$（函数（）{
$.each（$.parseJSON（jsonObject）、函数（键、值）{
$（“#myUl”）。追加（“”+key+“”）；
});
});

迭代JSON对象，然后为每个元素添加一个：

var jsonObject='{“Luigi”：{“name”：“Luigi”，“cf”：“lg”，“pi”：“123”，“电话”：“333”，“网站”：“site.it”，“sector”：“Engineer”，“address”：“Italy”}，“Davide”：“name”：“Davide”，“cf”：“dvd”，“pi”：“123456789”，“电话”：“755921”，“网站”：“mysite.it”，“sector”：“Software developer”，“address”：“Italy”}；
$（函数（）{
$.each（$.parseJSON（jsonObject）、函数（键、值）{
$（“#myUl”）。追加（“”+key+“”）；
});
});

策略很简单：
使用$.each（）
在对象中循环，并将键插入无序列表。在数据
属性中插入键值以供将来参考
将单击事件绑定到列表项。从数据
属性中检索键值，并循环遍历与该键关联的对象
使用与用户关联的每个对象的键值对填充由ID标识的表单输入
但是，请注意，输入ID和JSON文件中的某些键之间存在不匹配：

JSON中的name
，但表单中的namecuster
cf
，pi
以JSON格式存在，但未映射到任何表单输入元素


var userData={
“路易吉”：{
“姓名”：“路易吉”，
“cf”：“lg”，
“pi”：“123”，
“电话”：“333”，
“网站”：“site.it”，
“扇区”：“工程师”，
“地址”：“意大利”
},
“大卫”：{
“姓名”：“大卫”，
“cf”：“dvd”，
“pi”：“123456789”，
“电话”：“755921”，
“网站”：“mysite.it”，
“部门”：“软件开发人员”，
“地址”：“意大利”
}
};
//获取用户名
$.each（用户数据、函数（键、值）{
$（“#用户”）.append（““+key+””）；
});
//将单击事件绑定到列表项
$（文档）。在（'click'，'#users>li'，函数（）上{
var user=$（this.data（'user'）；
$.each（用户数据[user]，函数（键，值）{
$（'form'）.find（'#'+key）.val（value）；
});
});
#用户li{
光标：指针；
}


客户名称：
财政代码：
增值税编号：
电话：
电邮：
网站：
地址:
部门：
策略很简单：
使用$.each（）
在对象中循环，并将键插入无序列表。在数据
属性中插入键值以供将来参考
将单击事件绑定到列表项。从数据
属性中检索键值，并循环遍历与该键关联的对象
使用与用户关联的每个对象的键值对填充由ID标识的表单输入
但是，请注意，输入ID和JSON文件中的某些键之间存在不匹配：

JSON中的name
，但表单中的namecuster
cf
，pi
以JSON格式存在，但未映射到任何表单输入元素


var userData={
“路易吉”：{
“姓名”：“路易吉”，
“cf”：“lg”，
“pi”：“123”，
“电话”：“333”，
“网站”：“site.it”，
“扇区”：“工程师”，
“地址”：“意大利”
},
“大卫”：{
“姓名”：“大卫”，
“cf”：“dvd”，
“pi”：“123456789”，
“电话”：“755921”，
“网站”：“mysite.it”，
“部门”：“软件开发人员”，
“地址”：“意大利”
}
};
//获取用户名
$.each（用户数据、函数（键、值）{
$（“#用户”）.append（““+key+””）；
});
//将单击事件绑定到列表项
$（文档）。在（'click'，'#users>li'，函数（）上{
var user=$（this.data（'user'）；
$.each（用户数据[user]，函数（键，值）{
$（'form'）.find（'#'+key）.val（value）；
});
});
#用户li{
光标：指针；
}


客户名称：
财政代码：
增值税编号：
电话：
电邮：
网站：
地址:
部门：
使用jQuery和创建一个可单击的客户列表，通过每次单击填充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>

请注意，我是dna.js的贡献者
篡改代码：

使用jQuery和创建一个可单击的客户列表，每次单击都会填充HTML表单
<
<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>

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