如何将多个 .filter() 方法与 .map() 方法一起应用？

Question

我需要按多个条件筛选酒店：星级（多选）、类型（多选）、价格（两端范围）、国家（列表之一）。我试着那样做：

document.getElementById("app").innerHTML =`${hotels.filter(star => star.stars === 4).filter(type => type.type === "hostel").map(hotelTemplate)}`

但我发现我只能应用一种方法 filter 和 map。有人知道是否有办法应用多个 filter 方法然后 map 它们？

如果您需要更多详细信息，请附上完整代码：

async function filters(){
    const requestUrl = "js/hotels.json";
    const response = await fetch(requestUrl);
    const data = await response.json();
    const hotels = Object.values(data.hotels);

const hotelTemplate = (hotel) => {
        return `
        <div class="result">
        <img class="result__img" src="images/hotel2.png" alt="${hotel.name}">
        <div class="result__description">
            <p class="result__address">${hotel.address}</p>
            <h3 class="result__name">${hotel.name}</h3>
            <div class="result__details">
                <div class="rating">
                    <div class="rating__stars">${hotel.stars}</div>
                    <p class="rating__words"></p>
                </div>
                <div class="result__type">${hotel.type}</div>
            </div>
            <p class="result__info">${hotel.description}</p>
        </div>
        <div class="result__cta">
        <div class="review">
            <div class="review__head">
                <div class="review__rating">
                    <img class="review__star" src="images/star.svg" alt="${hotel.name}">
                    <p class="review__rate">${hotel.rating}</p>
                </div>
                <p class="review__estimate">Good</p>
                <p class="review__amount"><span class="review__number">${hotel.reviews_amount}</span> reviews</p>
            </div>
            <div class="review__body">
                <p class="review__text">"${hotel.last_review}"</p>
            </div>
        </div>
        <div class="order">
            <div class="order__price">
                <p class="order__offer">от <span class="order__amount">${eurFormatter.format(parseInt(hotel.min_price))}</span></p>
            </div>
            <button class="order__book">
                Book now
            </button>
        </div>
    </div>
    </div>
        `;
    }
document.getElementById("app").innerHTML =`${hotels.filter(star => star.stars === 4).map(hotelTemplate)}`

Answer 1

大家好阅读此消息！我在这里找到了解决方案：

https://gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72

如果您被上述相同问题带到这里，您很可能也会在那里找到它。

如何将多个 .filter() 方法与 .map() 方法一起应用？

How to apply multiple .filter() methods along with a .map() method?

javascript

arrays

mapping

json

filter