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

Question

[Heretic Man]

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

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

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.

Comments

[alex]

// Пробую AJAX а дальше не могу понять как сделать

что сделать то? отрендерить полученные данные? ну так создавайте поле в data() и в него записывайте, в чем сложности?

[0xD34F]

А чего надо-то? Попробуйте взглянуть на свой вопрос глазами человека, который понятия не имеет о вашей задаче, и поймёте, что о сути своих затруднений вы не рассказали ВООБЩЕ НИЧЕГО.

[Heretic Man]

0xD34F, Сорян, уже туплю, битый час сижу. Вопрос выше поправил, думаю правильно объяснил

Answer 1

[0xD34F]

Добавьте свойство 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));

Comments

[Heretic Man]

Отлично!