多维json对象的Javascript过滤器

Question

Can't use javascript filter in multi-dimensional object.

 var object = [{ "id": "1", "name": "General", "cards": [{ "id": "1", "name": "shawn" }, { "id": "2", "name": "neo" }] }, { "id": "2", "name": "CEO", "cards": [{ "id": "1", "name": "Raman" }, { "id": "2", "name": "Sheena" }] }] function searchFor(item) { return item.cards.filter( (card) => { return card.name.indexOf("Raman") !== -1; } ); } var filtered = object.filter(searchFor); console.log(filtered);

This is how I am trying, inside the searchFor card.name I am getting the correct card name but filtering is returning all the cards.Its not filtering.

Could any help me with this.

Answer 1

An empty array isn't considered falsey in Javascript. So instead of returning the result of filtering the cards array, test its length.

 var object = [{ "id": "1", "name": "General", "cards": [{ "id": "1", "name": "shawn" }, { "id": "2", "name": "neo" }] }, { "id": "2", "name": "CEO", "cards": [{ "id": "1", "name": "Raman" }, { "id": "2", "name": "Sheena" }] }] function searchFor(item) { return item.cards.filter( (card) => { return card.name.indexOf("Raman") !== -1; } ).length != 0; } var filtered = object.filter(searchFor); console.log(filtered);

Answer 2

You were returning the filtered array, which would produce a TRUE result whenever cards existed. So you can just turn that into a boolean, by saying when the item.cards.filter(...).length > 0 .

 var object = [{ "id": "1", "name": "General", "cards": [{ "id": "1", "name": "shawn" }, { "id": "2", "name": "neo" }] }, { "id": "2", "name": "CEO", "cards": [{ "id": "1", "name": "Raman" }, { "id": "2", "name": "Sheena" }] }] var searchFor = (card) => card.name.indexOf("Raman") > -1; var filteredCards = object.reduce((cards, item) => cards.concat(item.cards.filter(searchFor)), []); var filteredObj = object.map(i => { i.cards = i.cards.filter(searchFor); return i; }).filter(i => i.cards.length) console.log(filteredCards, filteredObj)

Updated

I updated the code snippet to produce either the cards which were found. I also provide a method for returning all objects which contain the needed cards, and filter out the other cards.

Answer 3

// HTML Part

  <div class="filter-list">
    <button class="filter" data-filter-key="all">all</button>
    <button class="filter" data-filter-key="open">open</button>
    <button class="filter" data-filter-key="done">done</button>
  </div>

// CSS Part

.filter:hover,
.filter:focus,
[data-active-filter="all"] .filter[data-filter-key="all"],
[data-active-filter="done"] .filter[data-filter-key="done"],
[data-active-filter="open"] .filter[data-filter-key="open"] {
  text-decoration: underline;
}

[data-active-filter="open"] [data-completed="true"],
[data-active-filter="done"] [data-completed="false"] {
  display: none;
}

// Script Part

(function () {
  const mainNode = document.querySelector("main");
  const filters = document.querySelector(".filter-list");

  for (const filter of filters.children) {
    filter.addEventListener("click", () => {
      mainNode.setAttribute(
        "data-active-filter",
        filter.getAttribute("data-filter-key")
      );
    });
  }

  mainNode.setAttribute("data-active-filter", "all");
})();