Вывести первые 3 значения массива через ForEach

131
16 апреля 2022, 08:20

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

Есть массив

const hotels = [
    {
        title: "Albus Hotel Amsterdam City Centre",
        price: 115,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/31881601.webp?k=25b6ebb4be040e97c397ac14ea706c37940679caed81ad3d8c4dddd1f10c71b2&o='
    },
    {
        title: 'Park Plaza Victoria Amsterdam',
        price: 150,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/13334194.webp?k=194460badd8a74b28e1bf59aa917de049ed1c9e1ec252ad26aec1ba492b7f69e&o='
    },
    {
        title: 'Park Inn by Radisson Amsterdam City West',
        price: 95,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/160590097.webp?k=4914b560022372de041f5e8ec2b257bdbbd318035848852193f0e64e04dd9402&o='
    },
    {
        title: 'NH City Centre Amsterdam',
        price: null,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/260988043.webp?k=f080732cb7ec98a4724a49936da46f5c36fa00d31e78cc3c7cc6f51c9e50ed37&o='
    },
    {
        title: 'Mercure Amsterdam Sloterdijk Station',
        price: 54,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/252169240.webp?k=09d57ae22ddc721dac84ccfbdf5433b8561e8995060b41128fb7271f79a075cc&o='
    },
    {
        title: 'Monet Garden Hotel Amsterdam',
        price: 102,
        photo: ''
    },
    {
        title: 'Radisson Blu Hotel, Amsterdam City Center',
        price: 154,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/228897852.webp?k=7b11c21a67b4f8e847628b69e83b7245fe2698b704a2f8245f44a49de5eb814a&o='
    },
    {
        title: 'NH Collection Amsterdam Barbizon Palace',
        price: 172,
        photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/256888798.webp?k=03b5832921f7a206abdc69df10bcb91992fb14b614917e452bd082a2a1abf47e&o='
    },
];
Answer 1

У forEach второй параметр отвечает за индекс элемента в массиве. Может использовать его для проверки, меньше ли он 3 или нет.

const hotels = [ { title: "Albus Hotel Amsterdam City Centre", price: 115, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/31881601.webp?k=25b6ebb4be040e97c397ac14ea706c37940679caed81ad3d8c4dddd1f10c71b2&o=' }, { title: 'Park Plaza Victoria Amsterdam', price: 150, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/13334194.webp?k=194460badd8a74b28e1bf59aa917de049ed1c9e1ec252ad26aec1ba492b7f69e&o=' }, { title: 'Park Inn by Radisson Amsterdam City West', price: 95, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/160590097.webp?k=4914b560022372de041f5e8ec2b257bdbbd318035848852193f0e64e04dd9402&o=' }, { title: 'NH City Centre Amsterdam', price: null, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/260988043.webp?k=f080732cb7ec98a4724a49936da46f5c36fa00d31e78cc3c7cc6f51c9e50ed37&o=' }, { title: 'Mercure Amsterdam Sloterdijk Station', price: 54, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/252169240.webp?k=09d57ae22ddc721dac84ccfbdf5433b8561e8995060b41128fb7271f79a075cc&o=' }, { title: 'Monet Garden Hotel Amsterdam', price: 102, photo: '' }, { title: 'Radisson Blu Hotel, Amsterdam City Center', price: 154, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/228897852.webp?k=7b11c21a67b4f8e847628b69e83b7245fe2698b704a2f8245f44a49de5eb814a&o=' }, { title: 'NH Collection Amsterdam Barbizon Palace', price: 172, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/256888798.webp?k=03b5832921f7a206abdc69df10bcb91992fb14b614917e452bd082a2a1abf47e&o=' }, ];
hotels.forEach((e, i) => { if (i < 3) console.log(e); });

Answer 2

Возможно, есть смысл использовать every вместо foreach, чтобы не проходить все элементы массива.

const hotels = [ { title: "Albus Hotel Amsterdam City Centre", price: 115, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/31881601.webp?k=25b6ebb4be040e97c397ac14ea706c37940679caed81ad3d8c4dddd1f10c71b2&o=' }, { title: 'Park Plaza Victoria Amsterdam', price: 150, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/13334194.webp?k=194460badd8a74b28e1bf59aa917de049ed1c9e1ec252ad26aec1ba492b7f69e&o=' }, { title: 'Park Inn by Radisson Amsterdam City West', price: 95, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/160590097.webp?k=4914b560022372de041f5e8ec2b257bdbbd318035848852193f0e64e04dd9402&o=' }, { title: 'NH City Centre Amsterdam', price: null, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/260988043.webp?k=f080732cb7ec98a4724a49936da46f5c36fa00d31e78cc3c7cc6f51c9e50ed37&o=' }, { title: 'Mercure Amsterdam Sloterdijk Station', price: 54, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/252169240.webp?k=09d57ae22ddc721dac84ccfbdf5433b8561e8995060b41128fb7271f79a075cc&o=' }, { title: 'Monet Garden Hotel Amsterdam', price: 102, photo: '' }, { title: 'Radisson Blu Hotel, Amsterdam City Center', price: 154, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/228897852.webp?k=7b11c21a67b4f8e847628b69e83b7245fe2698b704a2f8245f44a49de5eb814a&o=' }, { title: 'NH Collection Amsterdam Barbizon Palace', price: 172, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/256888798.webp?k=03b5832921f7a206abdc69df10bcb91992fb14b614917e452bd082a2a1abf47e&o=' }, ];
hotels.every((e, i) => { console.log(e); return i < 2; });

Answer 3

Используй slice

const hotels = [ { title: "Albus Hotel Amsterdam City Centre", price: 115, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/31881601.webp?k=25b6ebb4be040e97c397ac14ea706c37940679caed81ad3d8c4dddd1f10c71b2&o=' }, { title: 'Park Plaza Victoria Amsterdam', price: 150, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/13334194.webp?k=194460badd8a74b28e1bf59aa917de049ed1c9e1ec252ad26aec1ba492b7f69e&o=' }, { title: 'Park Inn by Radisson Amsterdam City West', price: 95, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/160590097.webp?k=4914b560022372de041f5e8ec2b257bdbbd318035848852193f0e64e04dd9402&o=' }, { title: 'NH City Centre Amsterdam', price: null, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/260988043.webp?k=f080732cb7ec98a4724a49936da46f5c36fa00d31e78cc3c7cc6f51c9e50ed37&o=' }, { title: 'Mercure Amsterdam Sloterdijk Station', price: 54, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/252169240.webp?k=09d57ae22ddc721dac84ccfbdf5433b8561e8995060b41128fb7271f79a075cc&o=' }, { title: 'Monet Garden Hotel Amsterdam', price: 102, photo: '' }, { title: 'Radisson Blu Hotel, Amsterdam City Center', price: 154, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/228897852.webp?k=7b11c21a67b4f8e847628b69e83b7245fe2698b704a2f8245f44a49de5eb814a&o=' }, { title: 'NH Collection Amsterdam Barbizon Palace', price: 172, photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/256888798.webp?k=03b5832921f7a206abdc69df10bcb91992fb14b614917e452bd082a2a1abf47e&o=' }, ];
hotels.slice(0, 3).forEach(hotel => {
  console.log(hotel.title);
});

READ ALSO
Перебор свойств объекта без метода
javascript

Перебор свойств объекта без метода

Есть объект с методом, нужно вывести все его свойства, но без метода

 208
Проблема с добавлением класса следующему элементу nodelist
javascript

Проблема с добавлением класса следующему элементу nodelist

Делаю галерею в модальном окне, наподобие fancybox только на чистом js, и возникла ошибка "Cannot read property 'classList' of undefined" при задавании класса...

 107
Как реализовать продолжение после регистрации на сайте?
javascript

Как реализовать продолжение после регистрации на сайте?

Есть форма регистрации написанная на html и cssКак открыть главную страницу после прохождения регистрации и нажатие на кнопку Submit, я новечек...

 94
Утечка памяти при вызове нативного onload в React
javascript

Утечка памяти при вызове нативного onload в React

Всем привет! Мучаюсь с такой проблемойЯ написал компоненту Canvas которая рендерит картинку представляющую из себя канвас и пропсы

 87