Я пытаюсь создать функцию фильтра поиска с помощью 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.Подскажите, пожалуйста, где я не прав?