How to change values in nested object to concat with array, and matching with id with javascript

Question

I have this object:

const obj = {
children: [
{
  value: "1",
  label: "Organization",
  Estatus: "1",
  IdTipo: "1",
  children: [
    {
      value: "68",
      label: "REGION 1",
      IdTipo: "3",
      Estatus: "1",
      children: [
        {
          value: "13",
          label: "Store 1",
          IdTipo: "3",
          Estatus: "1",
        },
        {
          value: "15",
          label: "Store 2",
          IdTipo: "3",
          Estatus: "1",
        },
        {
          value: "24",
          label: "Store 3",
          IdTipo: "3",
          Estatus: "1",
        },
      ],
    },
    {
      value: "69",
      label: "REGION 2",
      IdTipo: "3",
      Estatus: "1",
      children: [
        {
          value: "3",
          label: "Store 4",
          IdTipo: "3",
          Estatus: "1",
        },
        {
          value: "11",
          label: "Store 5",
          IdTipo: "3",
          Estatus: "1",
        },
      ],
    },
  ],
},],};

And I have this array

    const arr = [
{
"id": 13,
"balance": 44958.89
},
{
"id": 15,
"balance": 55687.89
},
{
"id": 24,
"balance": 16768.89
},
]

I need to match obj values and arr id to concat label and balance in object. I expected this:

{
children: [
{
  value: "1",
  label: "Organization",
  Estatus: "1",
  IdTipo: "1",
  children: [
    {
      value: "68",
      label: "REGION 1",
      IdTipo: "3",
      Estatus: "1",
      children: [
        {
          value: "13",
          label: "Store 1 44958.89",
          IdTipo: "3",
          Estatus: "1",
        },
        {
          value: "15",
          label: "Store 2 55687.89",
          IdTipo: "3",
          Estatus: "1",
        },
        {
          value: "24",
          label: "Store 3 16768.89",
          IdTipo: "3",
          Estatus: "1",
        },
      ],
    },

As yo can see, in my object, labels have now the name and balance. I don't know if it's very easy to solve it, but I'm very confused and I don't know how to solve it. Thank you!!

Answer 1

Here is a solution with an immutable recursive function:

/**
 * @typedef {object} OrgElement
 * @property {string} value
 * @property {string} label
 * @property {string} IdTipo
 * @property {string} Estatus
 * @property {string} [children]
 */

/**
 *
 * @param {OrgElement[]} orgElements
 * @param {{id: number, balance: number}[]} balanceData
 * @returns {OrgElement[]}
 */
function updateOrgs(orgElements, balanceData) {
  const data = [...balanceData];
  return orgElements.map((orgElement) => {
    const updatedOrgElement = { ...orgElement };
    if (updatedOrgElement.children && data.length > 0) {
      updatedOrgElement.children = updateOrgs(updatedOrgElement.children, data);
    }
    if (updatedOrgElement.value && data.length > 0) {
      const foundItemIndex = data.findIndex(
        (item) => item.id.toString() === updatedOrgElement.value
      );
      if (foundItemIndex > -1) {
        const value = data.splice(foundItemIndex, 1)[0];
        updatedOrgElement.label = `${updatedOrgElement.label} ${value.balance}`;
      }
    }
    return updatedOrgElement;
  });
}

const result = { children: updateOrgs(obj.children, arr) };