Итак, я практиковался в JS, и это то, что я столкнулся с вложенными объектами в массивах. как я могу получить доступ к значению количества, символ которого === "S" цвет === "красный" и ID === 0 const ...

0
Fahad Nadeem 9 Апр 2021 в 23:43

1 ответ

Лучший ответ

Вы можете получить доступ к полю количества с помощью методов поиска и фильтрации массива. В случае изменения элемента во вложенных объектах и ​​массивах вы можете использовать прямую мутацию в массиве и объектах, но мутация опасна во вложенных объектах / массивах.

Вместо этого вы можете использовать неизменяемый модификатор, такой как redux, с иммером.

Я сделал фрагмент с рабочим примером getQuantity, setQuantity с изменяемой и неизменной модификацией

const productUpdated = [
    {
        id: 0,
        price: 4999,
        title: "Updated MEN'S JEANS",
        name: 'SLIM Updated LEVI’S',
        varient: [
            {
                color: 'red',
                size: [
                    { symbol: 'S', quant: 10 },
                    { symbol: 'L', quant: 0 },
                    { symbol: 'XL', quant: 1 },
                ],
            },
            {
                color: 'green',
                size: [
                    { symbol: 'S', quant: 5 },
                    { symbol: 'L', quant: 1 },
                    { symbol: 'XL', quant: 6 },
                ],
            },
        ],
    },
    {
        id: 2,
        price: 4999,
        title: "Updated MEN'S JEANS",
        name: 'SLIM Updated LEVI’S',
        varient: [
            {
                color: 'red',
                size: [
                    { symbol: 'S', quant: 10 },
                    { symbol: 'L', quant: 0 },
                    { symbol: 'XL', quant: 1 },
                ],
            },
            {
                color: 'green',
                size: [
                    { symbol: 'S', quant: 5 },
                    { symbol: 'L', quant: 1 },
                    { symbol: 'XL', quant: 6 },
                ],
            },
        ],
    },
];

function getQuantity(id, color, size) {
    return productUpdated
        .find((product) => product.id === id)
        .varient.find((variant) => variant.color === color)
        .size.find((siz) => siz.symbol === size)?.quant;
}

function setQuantity(id, color, size, newQuantity) {
    console.log('Dangerous !!');
    const selectedSize = productUpdated
        .find((product) => product.id === id)
        .varient.find((variant) => variant.color === color)
        .size.find((siz) => siz.symbol === size);
    if (selectedSize) {
        selectedSize.quant = newQuantity;
    }
}

function immutableSetQuantity(id, color, size, newQuantity) {
    const selectedProduct = productUpdated.find((product) => product.id === id);
    const selectedVariant = selectedProduct.varient.find((variant) => variant.color === color);
    const selectedSize = selectedVariant.size.find((siz) => siz.symbol == size);
    return [
        {
            ...selectedProduct,
            varient: [
                {
                    ...selectedVariant,
                    size: [
                        { ...selectedSize, quant: newQuantity },
                        ...selectedVariant.size.filter((siz) => siz.symbol !== size),
                    ],
                },
                ...selectedProduct.varient.filter((variant) => variant.color !== color),
            ],
        },
        ...productUpdated.filter((product) => product.id !== id),
    ];
}

const quantity = getQuantity(0, 'red', 'S');

console.log({ quantity });

setQuantity(0, 'red', 'S', 11);

console.log(JSON.stringify(productUpdated, null, 2));

const products = immutableSetQuantity(0, 'red', 'S', 12);

console.log(JSON.stringify(products, null, 2));
1
sadok khouaja 9 Апр 2021 в 22:00