按JSON字段搜索名称
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了按JSON字段搜索名称相关的知识，希望对你有一定的参考价值。
我正在尝试构建一个提取JSON文件的小型Web应用程序。我能够显示信息但我想根据所选值限制显示的内容。
这是我的html
<div class="wrapper">
<div class="profile">
<select>
<option value="default" selected>Choose a superhero...</option>
<option value="1111">Superman</option>
<option value="2222">Batman</option>
<option value="3333">Spiderman</option>
</select>
<button id="showPeopleButton">Show People</button>
<table id="userdata" border="2" style="display: none">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
现在我的javascript。我已将JSON数据放在JavaScript中。
/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
// Call the showPeople() function
showPeople();
});
// Json data
var people = [{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"heroId": 1111
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"heroid": 2222
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"roll": 40,
"heroId": 3333
}];
// Show People function will draw the table
function showPeople() {
// Show table
$('#userdata').show();
//Populate table
$.each(people, function(index, person) {
var tableRow =
"<tr>" +
"<td>" + person.firstName + "</td>" +
"<td>" + person.lastName + "</td>" +
"<td>" + person.job + "</td>" +
"<td>" + person.roll + "</td>" +
"</tr>";
$(tableRow).appendTo("#userdata tbody");
});
}
我怎样才能让它为我工作？
答案
你必须
- 每次调用show People时重置英雄表。
- 将heroid属性名称更改为heroId for batman：P
- 过滤people数组以仅匹配当前选定的英雄ID
- 显示结果
示例代码：
/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
// Call the showPeople() function
showPeople();
});
var heroes = [{id: 1111, name: 'Superman'}, {id: 2222, name:'Batman'}, {id: 3333, name: 'Spiderman'}];
// Json data
var people = [{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"heroId": 1111
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"heroId": 2222
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"roll": 40,
"heroId": 3333
}
];
// Show People function will draw the table
function showPeople() {
// Show table
$('#userdata').show();
// Reset table
$("#userdata tbody").empty();
//Populate table
var heroId = Number($(".profile select").val());
var filteredPeople = people.filter(person => person.heroId === heroId);
$.each(filteredPeople, function(index, person) {
var tableRow =
"<tr>" +
"<td>" + person.firstName + "</td>" +
"<td>" + person.lastName + "</td>" +
"<td>" + person.job + "</td>" +
"<td>" + person.roll + "</td>" +
"</tr>"
$(tableRow).appendTo("#userdata tbody");
});
}
另一答案
- 你需要清空
tbody元素。 - 使用
$('#hero option:checked').val();检查horeId和所选选项
/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
// Call the showPeople() function
showPeople();
});
// Json data
var people = [{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"heroId": 1111
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"heroId": 2222
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"roll": 40,
"heroId": 3333
}
];
// Show People function will draw the table
function showPeople() {
// Show table
$('#userdata').show();
var hero = $('#hero option:checked').val();
//Populate table
$("#userdata tbody").empty()
$.each(people, function(index, person) {
if (hero == person.heroId) {
var tableRow =
"<tr>" +
"<td>" + person.firstName + "</td>" +
"<td>" + person.lastName + "</td>" +
"<td>" + person.job + "</td>" +
"<td>" + person.roll + "</td>" +
"</tr>"
$(tableRow).appendTo("#userdata tbody");
}
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="profile">
<select id="hero">
<option value="default" selected>Choose a superhero...</option>
<option value="1111">Superman</option>
<option value="2222">Batman</option>
<option value="3333">Spiderman</option>
</select>
<button id="showPeopleButton">Show People</button>
<table id="userdata" border="2" style="display: none">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>另一答案
你可以从<select>获得heroId：
var heroid = $(".profile>select").val();
然后进行比较，用return退出.each的当前迭代（相当于for循环中的continue，而不是像break那样完整的退出）。
$.each(people, function(index, person) {
if (person.heroId != heroid) return;
/* Listen for the Show People button to be clicked */
$('#showPeopleButton').click(function() {
// Call the showPeople() function
showPeople();
});
// Json data
var people = [{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"heroId": 1111
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"heroId": 2222
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"roll": 40,
"heroId": 3333
}
];
// Show People function will draw the table
function showPeople() {
// Show table
$('#userdata').show().find("tbody").empty();
var heroid = $(".profile>select").val();
//Populate table
$.each(people, function(index, person) {
if (person.heroId != heroid) return;
var tableRow =
"<tr>" +
"<td>" + person.firstName + "</td>" +
"<td>" + person.lastName + "</td>" +
"<td>" + person.job + "</td>" +
"<td>" + person.roll + "</td>" +
"</tr>"
$(tableRow).appendTo("#userdata tbody");
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="profile">
<select>
<option value="default" selected>Choose a superhero...</option>
<option value="1111">Superman</option>
<option value="2222">Batman</option>
<option value="3333">Spiderman</option>
</select>
<button id="showPeopleButton">Show People</button>
<table id="userdata" border="2" style="display: none">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>以上是关于按JSON字段搜索名称的主要内容，如果未能解决你的问题，请参考以下文章