Итак, во-первых, я работаю с JSON, но я не могу поместить это здесь в свой фрагмент, поэтому я просто объясню, что я пытаюсь сделать:
Когда вы загружаете страницу, она показывает коллекцию из 5 телефонов и имеет форму проверки с выбором и отправкой. На выбор есть варианты с уникальными марками телефонов. Например, если я выбираю «iPhone», я хочу, чтобы отображались только телефоны с маркой «iPhone».
Все работает до сих пор, но если я пытаюсь отфильтровать список, я получаю сообщение об ошибке «Невозможно прочитать фильтр свойств неопределенного», я полагаю, потому что я возвращаю ноль, но не могу найти решение. Я провел некоторое исследование и увидел, что этот вопрос уже задавался несколько раз, но я все еще не могу найти, как сделать это сам в этом коде.
Любая помощь будет полезна, спасибо!
Я работаю с es6, кстати:
{
let phones;
const initValidation = () => {
const $form = document.querySelector(`form`);
$form.noValidate = true;
$form.addEventListener(`submit`, handleSubmitForm);
}
const handleSubmitForm = e => {
const $form = e.target;
e.preventDefault();
if($form.checkValidity()){
const filteredPhones = getFilteredPhones();
createPhone(filteredPhones);
}
};
const getFilteredPhones = () => {
const brand = document.querySelector(`.brands`).value;
return phones.filter(phone => phone.brand == brand);
};
const setBrandOptions = brands => {
const $select = document.querySelector(`.brands`);
brands.sort().forEach(brand => {
const $option = document.createElement(`option`);
$option.value = brand;
$option.textContent = brand;
$select.appendChild($option);
});
};
const getUniqueBrands = phones => {
const uniqueBrands = [];
// for (let i = 0; i < phones.length; i++) {
// if (!uniqueBrands.includes(phones[i].brand)){
// uniqueBrands.push(phones[i].brand);
// console.log(phones[i].brand);
// }
// }
phones.forEach(phone => {
if(!uniqueBrands.includes(phone.brand)){
uniqueBrands.push(phone.brand);
console.log(phone.brand);
}
});
return uniqueBrands;
};
const createPhone = phones => {
const $div = document.createElement(`div`);
document.querySelector(`section`).appendChild($div);
const $img = document.createElement(`img`);
$img.setAttribute('src', phones.image);
$div.appendChild($img);
const $title = document.createElement(`h2`);
$title.textContent = phones.name;
$div.appendChild($title);
const $ul = document.createElement(`ul`);
$div.appendChild($ul);
$librand = document.createElement(`li`);
$librand.textContent = phones.brand;
$ul.appendChild($librand);
$liyear = document.createElement(`li`);
$liyear.textContent = phones.year;
$ul.appendChild($liyear);
};
const parseJSON = phones => {
console.log(phones);
phones.forEach(phone => createPhone(phone));
const brands = getUniqueBrands(phones);
setBrandOptions(brands);
};
const initJSON = () => {
const url = "assets/data/phones.json";
fetch(url)
.then(r => r.json())
.then(jsonObject => parseJSON(jsonObject));
};
const init = () => {
initJSON();
initValidation();
};
init();
}
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
section{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
}
div{
display: flex;
flex-direction: column;
padding-left: 3rem;
padding-right: 3rem;
}
h1{
border-bottom: .1rem solid black;
padding-right: 1rem;
padding-left: 1rem;
margin-bottom: 3rem;
}
img{
margin-bottom: 1rem;
height: 100%;
width: 100%;
}
h2{
font-family: sans-serif;
margin-left: 1rem;
font-size: 1.3rem;
}
ul{
margin-left: 1rem;
}
select{
margin-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>My Phone Collection</h1>
<form action="">
<label for="brands">Brand:
<select id="brands" class="brands input">
<option value="All">All</option>
</select>
<span class="error"></span>
</label>
<button type="submit">Search</button>
</form>
<section></section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>