Array and Object Manipulation JS

Question

So I was practicing some JS and this is what I came across nested Objects in arrays.
how can I access the value of quantity whose symbol === "S" color === "red" and ID === 0

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 } 
  ] } ] } ] 

I want to update or use value of the deepest nested variable there is.
I want to do this using map or filter if possible then again I am not expert.

Answer 1

I'm gona start with the get use case :

const PRODUCT_ID = 0;
const COLOR = 'red';
const SIZE = 'S';

const product = productUpdated.find(({ id }) => id === PRODUCT_ID);

const colorVarients = product?.varient.filter(({ color }) => color === COLOR) || [];

const filteredSize = colorVarients[0].size.filter(({ symbol }) => symbol === SIZE);

console.log('quantity', filteredSize[0].quant);

In the update part i used immutable structure that could be complicated at first so i'm agree with what @sadok said:

const NEW_QUANT = 55;

const updatedProducts = productUpdated.reduce((acc, product) => {
  if (product.id === PRODUCT_ID) {
    const colorVarient = product.varient.filter(({ color }) => color === COLOR);
    if (colorVarient.length > 0) {
      const isSizeExisting = colorVarient.some((varient) =>
        varient.size.some((size) => size.symbol === SIZE)
      );
      if (isSizeExisting) {
        return [
          ...acc,
          {
            ...product,
            varient: product.varient.map((varient) => ({
              ...varient,
              size: varient.size.map((size) => {
                if (size.symbol === SIZE && varient.color === COLOR) {
                  return { ...size, quant: NEW_QUANT };
                }
                return size;
              }),
            })),
          },
        ];
      }

      return [...acc, product];
    }
  }
  return [...acc, product];
}, []);

console.log('updatedProducts', JSON.stringify(updatedProducts, null, 4));

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,
          },
        ],
      },
    ],
  },
];

const PRODUCT_ID = 0;
const COLOR = 'red';
const SIZE = 'S';

const product = productUpdated.find(({ id }) => id === PRODUCT_ID);

const colorVarients = product?.varient.filter(({ color }) => color === COLOR) || [];

const filteredSize = colorVarients[0].size.filter(({ symbol }) => symbol === SIZE);

console.log('quantity', filteredSize[0].quant);

const NEW_QUANT = 55;

const updatedProducts = productUpdated.reduce((acc, product) => {
  if (product.id === PRODUCT_ID) {
    const colorVarient = product.varient.filter(({ color }) => color === COLOR);
    if (colorVarient.length > 0) {
      const isSizeExisting = colorVarient.some((varient) =>
        varient.size.some((size) => size.symbol === SIZE && varient.color === COLOR)
      );
      if (isSizeExisting) {
        return [
          ...acc,
          {
            ...product,
            varient: product.varient.map((varient) => ({
              ...varient,
              size: varient.size.map((size) => {
                if (size.symbol === SIZE && varient.color === COLOR) {
                  return { ...size, quant: NEW_QUANT };
                }
                return size;
              }),
            })),
          },
        ];
      }

      return [...acc, product];
    }
  }
  return [...acc, product];
}, []);

console.log('updatedProducts', JSON.stringify(updatedProducts, null, 4));

Answer 2

You can access to the quantity field with find and filter array methods. In case of modifing an element in nested Object and arrays, you can use direct mutation in array and objects but mutation is dangerous in nested Objects/Arrays.

Instead, you can use immutable modifier like redux with immer

I made a snippet with working example of getQuantity, setQuantity with mutable and immutable modification

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));