Задать вопрос
heretic_man
@heretic_man
vue

Как организовать ajax фильтрацию vue.js по критериям указанным в массиве?

Вот тут код.
Нужно при изменении выбранных элементов отравлять запрос по этим критериям (код чекнутых листов запушенный в массив уже есть и работает).

Вот, к примеру, массив в котором заданы ключи:

filter = ['KC', 'Z9', 'DV'];

А вот data.json:
[
  {
    "price": 27000,
    "flightDuration": "330",
    "flights": [
      {
        "cities": {
          "departureCity": "Алматы",
          "departureAirportName": "Алматы",
          "arrivalCity": "Актобе",
          "arrivalAirportName": "Актобе"
        },
        "departureTime": "23:00",
        "departureDate": "21 ноября",
        "arrivalTime": "00:45",
        "arrivalDate": "22 ноября",
        "airline": {
          "code": "KC",
          "name": "Air Astana"
        }
      },
      {
        "cities": {
          "departureCity": "Актобе",
          "departureAirportName": "Актобе",
          "arrivalCity": "Астана",
          "arrivalAirportName": "Астана"
        },
        "departureTime": "03:00",
        "departureDate": "22 ноября",
        "arrivalTime": "04:30",
        "arrivalDate": "22 ноября",
        "airline": {
          "code": "KC",
          "name": "Air Astana"
        }
      }
    ]
  },
     // И Т.Д.
]

С помощью этих ключей (filter) нужно отфильтровать data.json на схожесть значения в нём arr[N].flights[N].airline.code === "KC" и если есть, то записать в другой массив этот элемент (arr[N]) с data.json.
  • Вопрос задан
  • 171 просмотр
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Добавьте свойство flightsData, куда будете складывать данные, изначально - пустой массив.

Выводите его содержимое в шаблоне, например:

<div v-for="item in flightsData">
  <div>Price: {{ item.price }}</div>
  <div v-for="f in item.flights">
    <div>Departure: {{ f.cities.departureCity }}, {{ f.departureTime }}</div>
    <div>Arrival: {{ f.cities.arrivalCity }}, {{ f.arrivalTime }}</div>
  </div>
</div>

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

this.flightsData = response.data.filter(n => val.includes(n.flights[0].airline.code));
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Разработчик (Frontend developer / Vue.js)
МСтрой
от 99 999 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка бота в Telegram (POIZON)
16 апр. 2024, в 06:30
30000 руб./за проект
Исправить ошибку в пагинации 1с-битрикс
16 апр. 2024, в 05:27
500 руб./за проект
Ментор по программированию
16 апр. 2024, в 04:35
10 руб./в час
Ещё заказы