Фильтр JSON по React - PullRequest
Новая
       8

Фильтр JSON по React

0 голосов
/ 04 июля 2018

Мне нужно отфильтровать этот массив двумя способами: один - когда пользователь печатает, а другой - когда он нажимает на какую-то категорию, и мой код выглядит так:

https://gist.github.com/pedroapfilho/dbd48b1bf10c4ff625929cb2f67c6b41

import React, { Component } from "react";
import "./App.css";
import appslist from "../apps.json";

import Sidebar from "../components/Sidebar/Sidebar";
import HeaderSearch from "../components/HeaderSearch/HeaderSearch";
import ListContainer from "../components/ListContainer/ListContainer";
import Pagination from "../components/Pagination/Pagination";

class App extends Component {
  state = {
    list: appslist,
    searchfield: "",
    selectedcategory: "",
    currentpage: 1,
    itensperpage: 3
  };

  onSearchChange = event => {
    this.setState({ searchfield: event.target.value });
  };

  onClickCategory = event => {
    this.setState({ selectedcategory: event.target.id });
  };

  render() {
    const {
      list,
      searchfield,
      currentpage,
      itensperpage,
      selectedcategory
    } = this.state;

    let filteredList;

    filteredList = list.filter(list => {
      return list.name.toLowerCase().includes(searchfield.toLowerCase());
    });

    filteredList = list.filter(list => {
      return list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase());
    });

    return (
      <div className="flex-container">
        <Sidebar categorylist={list} selectedCategory={this.onClickCategory} />
        <section className="apps-list">
          <HeaderSearch searchChange={this.onSearchChange} />
          <ListContainer list={filteredList} />
          <Pagination currentPage={currentpage} itensperpage={itensperpage} />
        </section>
      </div>
    );
  }
}

export default App;

Я держал там оба filteredList, но будет работать только последний

Как сделать так, чтобы оба работали одновременно?

1 Ответ

0 голосов
/ 04 июля 2018

Вы можете связать фильтры: 

filteredList = list
    .filter(list => list.name.toLowerCase().includes(searchfield.toLowerCase()))
    .filter(list => list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase()));

Или даже записать его как один фильтр: 

filteredList = list.filter(
    list => list.name.toLowerCase().includes(searchfield.toLowerCase()) &&
            list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase())
);

Если вам нужно поведение ИЛИ вместо И, тогда используйте подход с одним фильтром и замените && на ||, очевидно.

Относительно вопроса из комментария:

Чтобы использовать все категории в вашем фильтре, вы можете использовать some или every (в зависимости от желаемой логики): 

filteredList = list.filter(
    list => list.name.toLowerCase().includes(searchfield.toLowerCase()) &&
            list.categories.some(
                cat => cat.toLowerCase() === selectedcategory.toLowerCase()
            )
);
...