Значение для каждого цикла не возвращается

Question

В моем компоненте Vue есть условное for-loop. Я только хочу пройтись по железнодорожным станциям, например, «Нью-Йорк» в качестве пункта назначения или «Нью-Йорк» на маршруте.

<tr v-for="departure in filterTrainStations" :key="departure.name">
            <td>{{ departure.product.categoryCode }}</td>
            <td>{{ departure.direction }}</td>
            <td>{{ getTimeFromDate(departure.actualDateTime) }}</td>
            <td>{{ departure.name }} </td>
        </tr>

Это мой стол с for-loop. И в настоящее время он показывает мне все поезда с указанием «Нью-Йорк». Но есть и поезда с другим направлением, но с «Нью-Йорком». Так что я тоже хочу проверить это. Это моя вычисленная filerTrainStations функция:

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        // Only return the trains which go to the right direction. 
        if(u.direction === city) {
            return u;
        }   

        // Check if there are any trains with the desired city on their route.
        u.routeStations.forEach(function (arrayItem) {
            if(arrayItem.mediumName === city) {
                console.log(u);
                return u;
            }                    
        })
    }
)},

Значение, которое должно возвращаться из функции forEach, ничего не возвращает, но когда я console.log, оно показывает мне правильную информацию.

Мой вопрос:

Почему значение u не возвращается?

Мой ответ от API, где яЯ получаю информацию об отправлении, которая выглядит следующим образом:

response: {
          "links": {},
            "payload": {
                "source": "PPV",
                "departures": [
                    {
                        "direction": "Weert",
                        "name": "NS  5249",
                        "plannedDateTime": "2019-10-10T15:08:00+0200",
                        "plannedTimeZoneOffset": 120,
                        "actualDateTime": "2019-10-10T15:08:00+0200",
                        "actualTimeZoneOffset": 120,
                        "plannedTrack": "1",
                        "product": {
                            "number": "5249",
                            "categoryCode": "SPR",
                            "shortCategoryName": "NS Sprinter",
                            "longCategoryName": "Sprinter",
                            "operatorCode": "NS",
                            "operatorName": "NS",
                            "type": "TRAIN"
                        },
                        "trainCategory": "SPR",
                        "cancelled": false,
                        "routeStations": [
                            {
                                "uicCode": "8400129",
                                "mediumName": "Boxtel"
                            },
                            {
                                "uicCode": "8400206",
                                "mediumName": "Eindhoven"
                            },
                            {
                                "uicCode": "8400245",
                                "mediumName": "Geldrop"
                            }
                        ],
                        "departureStatus": "INCOMING"
                    },
                ]
            },
            "meta": {}
          }

Answer 1

Почему значение, которое значение u не возвращается?

Поскольку оператор return просто возвращает функцию, переданную в forEach, он не возвращается извнешний filter метод. Вместо этого вы должны использовать find и вернуть результат:

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        // Only return the trains which go to the right direction. 
        if(u.direction === city) {
            return u;
        }   

        // Check if there are any trains with the desired city on their route.
        return u.routeStations.find(arrayItem => arrayItem.mediumName === city);
    }
)},

Но возникает другая проблема - строки кода сами находятся внутри filter, где вы должны возвращать true или falseв зависимости от того, хотите ли вы, чтобы этот элемент был включен или нет в результате. Без дополнительной информации трудно решить реальную проблему, с которой вы столкнулись. Однако возвращение что-нибудь правдивого приведет к тому, что departures элемент будет включен в результат.

Лично я бы сделал это так, как MKougiouris answer предлагает, как этонамного понятнее.

Answer 2

Ваш обратный вызов фильтра не соответствует тому, чего вы хотите достичь. Попробуйте это ниже:

filterTrainStations: function() {

    // Direction where the train has to go to.
    const city = this.city.mediumName; // New York

    return this.response.payload.departures.filter(function(u) {
        return u.direction == city || u.routeStations.some(function(rs){ rs.mediumName == city});
    });
)}

Дайте мне знать, если это поможет

РЕДАКТИРОВАТЬ: внес изменения, чтобы включить и ваш код, чтобы вам было проще понять, как его использовать!