Question

首先，我正在使用JSON，但我似乎无法将其放在我的代码片段中，所以我只是解释一下我要做的事情：

当你加载页面时，它显示了5个电话的集合，它有一个带有选择和提交的验证表单。在选择中，有独特品牌的手机选项。例如，如果我选择“iPhone”，我只想显示带有“iPhone”品牌的手机。

现在一切正常，但如果我尝试过滤列表我得到一个错误'无法读取未定义的属性过滤器'，我想因为我返回null但我似乎无法弄清楚解决方案。我做了一些研究，看到这个问题已经被多次询问了，但我仍然无法在我的这段代码中找到自己的方法。

任何帮助都会有用，谢谢！

我正在使用es6 btw：

{
  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>

Answer 1

我看起来你正在第一行实例化phones变量，但你永远不会为它赋值，所以它总是等于undefined。

检查您获取手机数据的位置，并确保将其分配给phones变量。

Answer 2

有些时候array.prototype.filter未定义，因此当您调用phones.filter(phone => phone.brand == brand);时，必须将空数组设置为默认值。

所以试着改变这个：

(phones || []).filter(phone => phone.brand == brand);

要：

let d = $('.select2-selection__choice').map(function() {
  return $(this).attr('title') // .trim() to get nicer results
}).get();
console.log(d);

无法读取未定义错误的属性“过滤器”

2 个答案: