我正在尝试使用keyup eventlistener创建一个搜索过滤器功能。我从下面的json文件中获取数据。
[{
"Category": "BUTTER",
"Data": {
"Niacin": 0.042,
"Major Minerals": {
"Copper": 0.0,
"Iron": 0.02,
"Sodium": 576,
"Potassium": 24,
"Calcium": 24,
"Magnesium": 2,
"Zinc": 0.09,
"Phosphorus": 24
},
"Vitamins": {
"Vitamin A - IU": 2499,
"Vitamin C": 0.0,
"Vitamin B12": 0.17,
"Vitamin B6": 0.003,
"Vitamin A - RAE": 684,
"Vitamin E": 2.32,
"Vitamin K": 7.0
},
"Carboydrate": 0.06,
"Selenium": 1.0,
"Thiamin": 0.005,
"Choline": 19,
"Beta Carotene": 158,
"Fiber": 0.0,
"Refuse Percentage": 0,
"Fat": {
"Saturated Fat": 51.368,
"Monosaturated Fat": 21.021,
"Total": 81.11,
"Polysaturated Fat": 3.043
},
"Water": 15.87,
"Lycopene": 0,
"Pantothenic Acid": 0.11,
"Ash": 2.11,
"Alpha Carotene": 0,
"Retinol": 671,
"Manganese": 0.0,
"Beta Cryptoxanthin": 0,
"Riboflavin": 0.034,
"Cholesterol": 215,
"Lutein and Zeaxanthin": 0,
"Kilocalories": 717,
"Household Weights": {
"1st Household Weight Description": "1 cup",
"1st Household Weight": 227.0,
"2nd Household Weight": 14,
"2nd Household Weight Description": "1 tbsp"
},
"Sugar Total": 0.059999999,
"Protein": 0.85
},
"Description": "BUTTER,WITH SALT",
"Nutrient Data Bank Number": 1001
},
{
"Category": "BUTTER",
"Data": {
"Niacin": 0.042,
"Major Minerals": {
"Copper": 0.016,
"Iron": 0.16,
"Sodium": 827,
"Potassium": 26,
"Calcium": 24,
"Magnesium": 2,
"Zinc": 0.05,
"Phosphorus": 23
},
"Vitamins": {
"Vitamin A - IU": 2499,
"Vitamin C": 0.0,
"Vitamin B12": 0.13,
"Vitamin B6": 0.003,
"Vitamin A - RAE": 684,
"Vitamin E": 2.32,
"Vitamin K": 7.0
},
"Carboydrate": 0.06,
"Selenium": 1.0,
"Thiamin": 0.005,
"Choline": 19,
"Beta Carotene": 158,
"Fiber": 0.0,
"Refuse Percentage": 0,
"Fat": {
"Saturated Fat": 50.489,
"Monosaturated Fat": 23.426,
"Total": 81.11,
"Polysaturated Fat": 3.012
},
"Water": 15.87,
"Lycopene": 0,
"Pantothenic Acid": 0.11,
"Ash": 2.11,
"Alpha Carotene": 0,
"Retinol": 671,
"Manganese": 0.004,
"Beta Cryptoxanthin": 0,
"Riboflavin": 0.034,
"Cholesterol": 219,
"Lutein and Zeaxanthin": 0,
"Kilocalories": 717,
"Household Weights": {
"1st Household Weight Description": "1 cup",
"1st Household Weight": 151.0,
"2nd Household Weight": 9,
"2nd Household Weight Description": "1 tbsp"
},
"Sugar Total": 0.059999999,
"Protein": 0.85
},
"Description": "BUTTER,WHIPPED,WITH SALT",
"Nutrient Data Bank Number": 1002
},
{
"Category": "BUTTER OIL",
"Data": {
"Niacin": 0.003,
"Major Minerals": {
"Copper": 0.001,
"Iron": 0.0,
"Sodium": 2,
"Potassium": 5,
"Calcium": 4,
"Magnesium": 0,
"Zinc": 0.01,
"Phosphorus": 3
},
"Vitamins": {
"Vitamin A - IU": 3069,
"Vitamin C": 0.0,
"Vitamin B12": 0.01,
"Vitamin B6": 0.001,
"Vitamin A - RAE": 840,
"Vitamin E": 2.8,
"Vitamin K": 8.6
},
"Carboydrate": 0.0,
"Selenium": 0.0,
"Thiamin": 0.001,
"Choline": 22,
"Beta Carotene": 193,
"Fiber": 0.0,
"Refuse Percentage": 0,
"Fat": {
"Saturated Fat": 61.924,
"Monosaturated Fat": 28.732,
"Total": 99.48,
"Polysaturated Fat": 3.694
},
"Water": 0.24,
"Lycopene": 0,
"Pantothenic Acid": 0.01,
"Ash": 0.0,
"Alpha Carotene": 0,
"Retinol": 824,
"Manganese": 0.0,
"Beta Cryptoxanthin": 0,
"Riboflavin": 0.005,
"Cholesterol": 256,
"Lutein and Zeaxanthin": 0,
"Kilocalories": 876,
"Household Weights": {
"1st Household Weight Description": "1 cup",
"1st Household Weight": 205.0,
"2nd Household Weight": 13,
"2nd Household Weight Description": "1 tbsp"
},
"Sugar Total": 0.0,
"Protein": 0.28
},
"Description": "BUTTER OIL,ANHYDROUS",
"Nutrient Data Bank Number": 1003
}
]
json文件更大，我不会在这里全部复制。
这是我的js代码。我从输入元素中获取值，并比较json中的每个对象（如果存在匹配），则该对象将传递给html中的表。
document.getElementById('input').addEventListener('keyup', getFood);
function getFood(e) {
const input = e.target.value.toLowerCase();
const tbody = document.querySelector('#output');
console.log(input);
const xhr = new XMLHttpRequest();
xhr.open('GET', `food.json`, true);
xhr.onload = function () {
if (this.status === 200) {
const response = JSON.parse(this.responseText);
const content = document.createElement('tr');
response.forEach(function (item) {
if (item.Description.toLowerCase().indexOf(input) != -1) {
content.innerHTML = `<td>${item.Description} </td>
<td>${item.Data.Kilocalories} </td>
<td>${item.Data.Carboydrate} </td>
<td> ${item.Data.Fat.Total} </td>
<td><a href="#" class="delete-item secondary-content">  <i class="fa fa-plus"></i></a></td>
`;
}
});
tbody.appendChild(content);
}
}
xhr.send();
e.preventDefault();
}
这是我的html
<table id="nutrients" class="table table-striped">
<thead>
<tr>
<th scope="col">Nutrient</th>
<th scope="col">Calorie</th>
<th scope="col">Carbohydrate</th>
<th scope="col">Fat</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
当我输入输入时，我得到了一些值，但是这些值保留在表中，即使键入另一个单词，我也会在其上获取新值，并且如果我删除输入，它们仍在表中。我猜我的if逻辑有误。你能告诉我我哪里错了吗？