Как отфильтровать число и строку в массиве объектов - PullRequest
Новая
       2

Как отфильтровать число и строку в массиве объектов

0 голосов
/ 27 мая 2019

Я хочу отфильтровать данные о сотруднике. У меня есть опция выбора, содержащая как число, так и строку ... Я могу отфильтровать строку в объекте, но не могу сделать это номером ... Пожалуйста, укажите мне 

        <select id="endDate" onchange="sortEDate()">
            <option value="All Years">All Years</option>
            <option value="Past Years">Past Years</option>
            <option value="Present">Present</option>
        </select>
        <p id="demo1"></p>

const employees = [
    { firstname: "Dav", start: 2013, end: 2018 },
    { firstname: "Gemmy", start: 2016, end: "Present" }
]
function sortEDate() {
    const filterDate = [];
    let cDate = document.getElementById("endDate").value;
    employees.forEach(function(item, index, array) {
        if (item.end === cDate) {
            filterDate.push(item);
        }
    });

    let fDate = "<table>";
    filterDate.forEach(function(filterDate) {
        fDate += "<tr>";
        fDate += "<td>" + filterDate.firstname + "</td>";
        fDate += "<td>" + filterDate.start + "</td>";
        fDate += "<td>" + filterDate.end + "</td>";
        fDate += "</tr>";
    });
    fDate += "</table>";
    document.getElementById("demo1").innerHTML = fDate;

    let allEducation = document.getElementById("endDate").value;
    if (allEducation === "All Years") {
        showEmployees();
    }
}

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Я внес некоторые изменения, чтобы сделать эту работу, как ожидалось. Я использовал label, а также value для элементов option, а также передавал фактическое выбранное значение в обработчик select onchange. Также я загрузил элементы в load на теле, которые вы можете удалить. Я просто хотел, чтобы они загружались при загрузке страницы и т. Д. Поскольку вы не используете jQuery, он используется в обработчике событий onload и т. Д. 

const employees = [{
    firstname: "Dav",
    start: 2013,
    end: 2018
  },
  {
    firstname: "Gemmy",
    start: 2016,
    end: "Present"
  }
]

function filterDates(sel) {
  let filterDate = []
  sel = sel || "All"
  filterDate.push(...employees.filter(function(obj) {
    switch (sel) {
      case "All":
        return true  // return all
      case "Past":
        return obj.end < new Date().getFullYear() // just past years
      case "Present":
        return obj.end === 'Present' 
    }
  }))

  let fDate = "<table>";
  filterDate.forEach(function(filterDate) {
    fDate += "<tr>";
    fDate += "<td>" + filterDate.firstname + "</td>";
    fDate += "<td>" + filterDate.start + "</td>";
    fDate += "<td>" + filterDate.end + "</td>";
    fDate += "</tr>";
  });
  fDate += "</table>";
  document.getElementById("demo1").innerHTML = fDate;
}
<body onload="filterDates()">
  <select id="endDate" onchange="filterDates(this.value);">
    <option label="All Years" value="All">All Years</option>
    <option label="Past Years" value="Past">Past Years</option>
    <option label="Present" value="Present">Present</option>
  </select>
  <p id="demo1"></p>
  <body/>

Ключ - это фильтрация, которую я не хотел менять слишком сильно, поэтому я оставил то, что вы делаете, по большей части, за исключением того, что теперь он использует Array.filter и switch для внутренних целей, чтобы знать, как фильтровать в зависимости от выбранной опции.

0 голосов
/ 27 мая 2019

В приведенном ниже примере, если блок попробуйте использовать == вместо ===

if (item.end == cDate) {
    filterDate.push(item);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...