Как сделать фильтр множественных опций в реакции нативного или javascript с данными JSON и локальным массивом? - PullRequest
0 голосов
/ 28 сентября 2018

Тип изображения фильтра

Я хочу выполнить фильтрацию с несколькими параметрами, как показано на рисунке выше.

Здесь я получаю объект после установки флажков:

let Marray = {
  loc:["Btm","Bannegatha road","Whitefield"],
  day: ["Mon","Sun", "Tue"],
  Timing: ["Morning","Evening"]
};

//This is getting data from API 

   let data = [{
    "id_product": "1",
    "product_name": "Swimming",
    "id_facility": "16",
    "facility_name": "Atom Sports Arena",
    "filter_entity": {
        "timings":["Morning","Afternoon","Evening"],
        "open_days":["Mon","Tue","Wed","Thu","Fri","Sat"]
    },
    "location_name": "Bannerghatta Road"
},
    {
        "id_product": "2",
        "product_name": "Badminton",
        "id_facility": "20",
        "facility_name": "Sports Alley",
        "filter_entity": {
            "timings":["Morning","Afternoon","Evening"],
            "open_days":["Mon","Tue","Wed","Thu","Fri","Sun","Sat"],
        },
        "location_name": "Bannerghatta Road"
    },
    {
        "id_product": "3",
        "product_name": "Intermediate Level Football",
        "id_facility": "16",
        "facility_name": "Atom Sports Arena",
        "filter_entity": {
            "timings":["Evening"],
            "open_days":["Tue","Mon","Wed","Thu","Fri","Sat","Sun"],
        },
        "location_name": "Whitefield"
    },
    {
        "id_product": "4",
        "product_name": "Bharatnatyam",
        "id_facility": "22",
        "facility_name": "Natyalaya",
        "filter_entity": {
            "timings":["Evening"],
            "open_days":["Mon","Wed","Fri","Sat","Sun"],
        },
        "location_name": "BTM"
    },
    {
        "id_product": "5",
        "product_name": "Basket Ball",
        "id_facility": "17",
        "facility_name": "DHI Sports Center",
        "filter_entity": {
            "timings":["Morning","Evening"],
            "open_days":["Mon","Wed","Fri"],
        },
        "location_name": "Whitefield"

    }
];

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

  function comparer(otherArray) {
      let data= []

      data= responseJson.data




console.log(filtered);


    otherArray.forEach(appliedFilters => {
        console.log(appliedFilters.loc)
        if (appliedFilters.loc) {
          // let filterParray = []
          let selectedDays = appliedFilters.loc;
            let prOpenDays = '';
            myarray.forEach(element => {
             // console.log(element);
              prOpenDays = JSON.parse(element.filter_entity).open_days;
               if (prOpenDays.includes(selectedDays)){
                 console.log('suc')
              filterParray.push({
                  product_name: element.product_name,
                    thumbnail: element.thumbnail,
                    id_product: element.id_product,
                    location_name: element.location_name,
                    facility_name: element.facility_name,
                    min_cost: element.min_cost
              });
                console.log(element.product_name);
                //filterParray[] = element.product_name
              }

            });
            console.log(filterParray)

        }
        if (appliedFilters.location_name1) {
            let selectedloc = appliedFilters.location_name1;

           let location_name = '';
           myarray.forEach(element => {
            location_name = element.location_name;

             if (selectedloc === location_name) {
               filterParray1.push({
                 product_name: element.product_name,
                 thumbnail: element.thumbnail,
                 id_product: element.id_product,
                 location_name: element.location_name,
                 facility_name: element.facility_name,
                 min_cost: element.min_cost


               });
               //filterParray[] = element.product_name
             }

           });         
             console.log(filterParray1)
         }
          if (appliedFilters.timings1 && appliedFilters.open_days1 ) {
            // let filterParray = []
  console.log(otherArray)
            let selectetimings = appliedFilters.timings1;
            let openday = appliedFilters.open_days1
     console.log(selectetimings + openday)
            let prtimngs = '';

            myarray.forEach(element => {
              // console.log(element);

              prtimngs = JSON.parse(element.filter_entity).timings;
              prOpenDays1 = JSON.parse(element.filter_entity).open_days;

              if (prtimngs.includes(selectetimings) ) {
                filterParray2.push({
                  product_name: element.product_name,
                  thumbnail: element.thumbnail,
                  id_product: element.id_product,
                  location_name: element.location_name,
                  facility_name: element.facility_name,
                  min_cost: element.min_cost,
                  prOpenDays1: prOpenDays1
                });
                // console.log(prOpenDays1);
                //filterParray[] = element.product_name
              }

            });
            console.log(filterParray2)

          }


             })

    }
     (comparer(Marry))

Итак, наконец, он должен отфильтровать точные значения, и если я выбираю местоположение и день, он должен показывать только эти данные, никаких других данных.

Как я могу продолжить?Я пытался сравнить массив, но это тоже не сработало;он должен фильтровать по отдельным и множественным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...