Как отсортировать массив по его элементам js

Question

Я делаю интернет магазин, товаров выходит много, и для этого мне нужна сортировка.

Это сам массив в котором хранятся данные о продукте.

const CATALOG = [
    {
        id: 'el1',
        name: 'ЗОЛОТОЙ ШАМПУНЬ',
        img: '../../main/Estel/img/estel-prima-blond/ЗОЛОТОЙ ШАМПУНЬ.webp',
        quantity: 1,
        price: 450,
        productType: 'shampoo',
    },
    {
        id: 'el2',
        name: 'СЕРЕБРИСТЫЙ ШАМПУНЬ',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТЫЙ ШАМПУНЬ.webp',
        price: 900,
        quantity: 1,
        productType: 'shampoo',
    },
    {
        id: 'el3',
        name: 'СЕРЕБРИСТЫЙ БАЛЬЗАМ',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТЫЙ БАЛЬЗАМ.webp',
        price: 450,
        quantity: 1,
        productType: 'balsam',
    },
    {
        id: 'el4',
        name: 'СЕРЕБРИСТАЯ МАСКА',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТАЯ МАСКА.webp',
        price: 650,
        quantity: 1,
        productType: 'mask',
    }];

Это функция onclick, при нажатии должна сортировать именно тот товар, у которого в элементе массива написан productType: 'shampoo', но не работает.

function shampooFun() {
    return CATALOG = CATALOG.filter((element)=>{return element['productType'] === 'shampoo';});
}

Далее КАТАЛОГ должен сделать выводы разными способами, но ничего не вышло.

Вот визуальная часть для общего понимания,

Answer 1

const CATALOG = [
    {
        id: 'el1',
        name: 'ЗОЛОТОЙ ШАМПУНЬ',
        img: '../../main/Estel/img/estel-prima-blond/ЗОЛОТОЙ ШАМПУНЬ.webp',
        quantity: 1,
        price: 450,
        productType: 'shampoo',
    },
    {
        id: 'el2',
        name: 'СЕРЕБРИСТЫЙ ШАМПУНЬ',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТЫЙ ШАМПУНЬ.webp',
        price: 900,
        quantity: 1,
        productType: 'shampoo',
    },
    {
        id: 'el3',
        name: 'СЕРЕБРИСТЫЙ БАЛЬЗАМ',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТЫЙ БАЛЬЗАМ.webp',
        price: 450,
        quantity: 1,
        productType: 'balsam',
    },
    {
        id: 'el4',
        name: 'СЕРЕБРИСТАЯ МАСКА',
        img: '../../main/Estel/img/estel-prima-blond/СЕРЕБРИСТАЯ МАСКА.webp',
        price: 650,
        quantity: 1,
        productType: 'mask',
    }];

function shampooFun(CATALOG) {
    return CATALOG.filter((element)=>{return element['productType'] === 'shampoo';});
}

console.log(shampooFun(CATALOG));

Answer 2

    function shampooFun() {
        return CATALOG.filter((element)=>element.productType === 'shampoo');
    }
    shampooFun()

БЛОГ НА HUSL

Как отсортировать массив по его элементам js

Ответы (2 шт):