Creating and Updating multidimensional array / objects in javascript

Question

So I have to manipulate a large state or array of addons to show it as a summary. So I want to have the format below

[
  'addonGroupIndexHere' =>[
      "13249" => {
          label: "whatever the label is",
          price: 10.00,
          sku: "13249",
          qty: 1, 
          total: 10.00
      }, 
      "13250" =>  => {
          label: "whatever the label is",
          price: 5.00,
          sku: "13250",
          qty: 3, 
          total: 15.00
      }, 
  ],  
  'addonGroupAnotherIndexHere' =>[
      "13251" => {
          label: "whatever the label is",
          price: 10.00,
          sku: "13251",
          qty: 1, 
          total: 10.00
      }, 
      "13252" =>  => {
          label: "whatever the label is",
          price: 5.00,
          sku: "13252",
          qty: 3, 
          total: 15.00
      }, 
  ], 
]

so I declared a state in a context like below

const [addonSummary, setAddonSummary] = useState([])

An addon is an object like

{
label: "whatever the label is"
price: 10.00
sku: "13249"
}

So when a user adds 1 quantity of an addon I will have to modify the addon object like below

{
label: "whatever the label is"
price: 10.00
sku: "13249",
qty: 1,
total: 10.00
}

So if its 2 quantities then I need the object to be like below

{
    label: "whatever the label is"
    price: 10.00
    sku: "13249",
    qty: 3,
    total: 30.00
    }

I don't have a problem setting or updating the addon object but my problem is when I set the addon summary state with a specific addon group index.

 const addonItem = {
            label: "whatever the label is"
            price: 10.00
            sku: "13249",
            qty: 3,
            total: 30.00
        }
 const addonGroupIndex = 0 // or 1 or 3. This is actually a state selected by the user

I am having problem manipulating an array/object to have the following output

[
  'addonGroupIndexHere' =>[
      "13249" => {
          label: "whatever the label is",
          price: 10.00,
          sku: "13249",
          qty: 1, 
          total: 10.00
      }, 
      "13250" =>  => {
          label: "whatever the label is",
          price: 5.00,
          sku: "13250",
          qty: 3, 
          total: 15.00
      }, 
  ],  
  'addonGroupAnotherIndexHere' =>[
      "13251" => {
          label: "whatever the label is",
          price: 10.00,
          sku: "13251",
          qty: 1, 
          total: 10.00
      }, 
      "13252" =>  => {
          label: "whatever the label is",
          price: 5.00,
          sku: "13252",
          qty: 3, 
          total: 15.00
      }, 
  ], 
]

I tried doing but it doesn't work.

 addonSummary[addonGroupIndex ][addonItem.sku] = addonItem

The follow are the the codes I have. ProductContext.js

import { isEmpty } from 'lodash';
import { useState, createContext, useRef, useEffect } from 'react';
import { v4 } from 'uuid';

export const ProductContext = createContext()

export const ProductContextProvider = (props) => {

    
    const [selectedAddonGroup, setSelectedAddonGroup] = useState(-1);
    const [addonSummary, setAddonSummary] = useState([])


    const updateAddonSummary = (addonItem) => {
        // console.log('updateAddonSummary', addonItem)
        // console.log('selectedAddonGroup', selectedAddonGroup)
        if (!isEmpty(addonSummary[selectedAddonGroup])) {
            addonSummary[selectedAddonGroup] = [addonSummary[selectedAddonGroup], addonItem]
        } else {
            addonSummary[selectedAddonGroup] = addonItem
        }

    }


    return (
        <ProductContext.Provider value={{
            addonDialog: {
                selectedAddonGroup, setSelectedAddonGroup,
                summary: addonSummary, updateSummary: updateAddonSummary,
                setAddonSummary
            }
        }}>
            {props.children}
        </ProductContext.Provider>
    )
}

AddonsQuantityFields.js

import { GbMinus, GbPlus } from '@gb-components/icons'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import { useProductContext } from '@gb-utils/product/product';

export default function AddonsQuantityFields({ addonItem }) {

    const { addonDialog } = useProductContext();
    const [quantity, setQuantity] = useState(0)

    function updateQuantity(action, qty) {

        if ('minus' == action) {
            addonDialog.deductAddonQty(qty)
            qty = quantity - qty
        } else {
            addonDialog.increaseAddonQty(qty)
            qty = quantity + qty
        }

        if (qty <= 0) {
            // if qty is zero then we need to remove it from the summary
        } else {
            const total = qty * addonItem.price;
            const item = {}
            item[addonItem.sku] = addonItem
            addonDialog.updateSummary(item)
            console.log('addonDialog.summary', addonDialog.summary)
        }

        setQuantity(qty)
    }


    return (
        <div className='flex w-[96px] justify-end gap-0'>
            <button className={classNames(
                quantity <= 0 ? 'hidden' : '',
                'flex items-center justify-center m-0 h-[32px] w-[32px] border border-[#E4E4E4] bg-[#F7F7F7]'
            )} onClick={() => updateQuantity('minus', 1)}>
                <GbMinus />
            </button>
            <input
                readOnly
                className={classNames(
                    quantity <= 0 ? 'hidden' : '',
                    'h-[32px]  w-[32px] border border-[#E4E4E4] focus:ring-0 text-sm text-center text-[#656565]  p-0'
                )}
                type={'number'}
                inputMode='numeric'
                autoComplete='off'
                value={quantity}
                step="1" min="0"
            />
            <button
                className='flex items-center justify-center m-0 h-[32px] w-[32px] border border-[#E4E4E4] bg-[#F7F7F7]'
                onClick={() => updateQuantity('add', 1)}>
                <GbPlus />
            </button>
        </div>
    )
}

then the component that shows the Addon component is below

AddonItem.js

import { GbAddonItemImgPlaceholder, GbChevronDown, GbChevronUp } from '@gb-components/icons'
import classNames from 'classnames'
import { isEmpty } from 'lodash'
import React, { useState } from 'react'
import AddonsQuantityFields from '../quantity-fields/AddonsQuantityFields'

export default function AddonItem() {
    const addonItem =  {
        label: "whatever the label is"
        price: 10.00
        sku: "13249"
    }

    return (
            <ProductContextProvider>
                <AddonsQuantityFields addonItem={addonItem} />
            </ProductContextProvider>
    )
}

I dont understand your question what do you want to know? Your code seems to work fine. — Webdeveloper_Jelle, Aug 31 '22 at 08:42
I have updated my question. I don't know how to manipulate the javascript array the way I wanted it to output. — jameshwart lopez, Aug 31 '22 at 08:44
So you have trouble updating the object? OR you have trouble with getting this object structure? Can you post some more `javascript` code you use? In that way I have more context. — Webdeveloper_Jelle, Aug 31 '22 at 08:48
yeah Im having trouble with getting the structure I wanted. let me update the post with more code. — jameshwart lopez, Aug 31 '22 at 08:50
Please provide the original array or object and expected output — A1exandr Belan, Aug 31 '22 at 08:52
@A1exandrBelan the orriginal array is empty and what I have is an addon. basically I need to push the addon object to the empty state/array which is the summary. — jameshwart lopez, Aug 31 '22 at 08:54
I have updated my questions with the codes/components I have. — jameshwart lopez, Aug 31 '22 at 09:09

score 1 · Accepted Answer · answered Aug 31 '22 at 09:14

You cannot use arrays with keys in JS.
You should use an object if you want to use a key for each addonItem.

var addonSummary = {};
const addonItem = {
    label: "whatever the label is",
    price: 10.00,
    sku: "13249",
    qty: 3,
    total: 30.00
}
const addonGroupIndex = 0;
if(!addonSummary.hasOwnProperty(addonGroupIndex))
{
    addonSummary[addonGroupIndex] = {};
}
if(!addonSummary[addonGroupIndex].hasOwnProperty(addonItem.sku))
{
    addonSummary[addonGroupIndex][addonItem.sku] = {};
}
addonSummary[addonGroupIndex][addonItem.sku] = addonItem;
console.log(addonSummary);

This gives the following structure:

{
  "addonGroupIndexHere": {
    "13249": {
      "label": "whatever the label is",
      "price": 10,
      "sku": "13249",
      "qty": 3,
      "total": 30
    },
    "13250": {
      "label": "whatever the label is",
      "price": 5,
      "sku": "13250",
      "qty": 3, 
      "total": 15
    }
  },
  "AnotheraddonGroupIndexHere": {
    "13251": {
      "label": "whatever the label is",
      "price": 10,
      "sku": "13251",
      "qty": 3,
      "total": 30
    },
    "13252": {
      "label": "whatever the label is",
      "price": 5,
      "sku": "13252",
      "qty": 3, 
      "total": 15
    }
  }
}

Hope this helps :)

Thanks looks like this is what I need. Let me test it on my site — jameshwart lopez, Aug 31 '22 at 09:35

Michele Viviani · Answer 2 · 2022-08-31T13:51:34.643

In React state must be immutable. When you update it, in this case the array addonSummary, you have to use the hook setAddonSummary, not change it directly like this addonSummary[addonGroupIndex ][addonItem.sku] = addonItem .

Next, state management is not a certain laws, everyone could do the same thing in very different way, so you have to chose your strategy.

the easiest thing would be something like this:

export function addOnList(data = {}) {
  const [addonSummary, setAddonSummary] = useState(data);

  function updateElement(summaryIndex, key, newValue = {}) {
    const oldSummary = addonSummary[summaryIndex];
    const newSummary = Object.keys(oldSummary).reduce((previous, current) => {
      previous[current] = current !== key ? oldSummary[current] : newValue;
      return previous;
    }, {});

    const newData = {
      ...addonSummary,
      ...{ [summaryIndex]: newSummary }
    };

    setAddonSummary(newData);
  }

  return (
    // on the element which the user click, change etc... to update the state
    // you set the attribute 
    // onClikc={ (event) => updateElement(summIndex, elementKey, newAddonElement)}

  );
}

The render method is super pseudo code, basically from the event you have to build the new addOn object, and pass it to the update function with the corresponding group index and sku (key). And in this way you can correctly update the state addonSummary wich contains the main array you posted

I am new to react so I don't know what problem I will be facing if I update the addon directly. Can you please let me know? — jameshwart lopez, Sep 01 '22 at 03:26
https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really It's the react pattern. The next state is set always within a function (callback), to get the library working properly. With setSummary you can avoid to have a global context for the data (anti pattern), and simply use the components tree to pass the data array and update it. Example: https://reactjs.org/docs/thinking-in-react.html — Michele Viviani, Sep 02 '22 at 07:47

Creating and Updating multidimensional array / objects in javascript

2 Answers2