Nested arrays and targeting array by keys

Question

I'm really not sure how to word this issue but I will try my best.

I have a nested array:

const items = [
  {
    id: 1,
    name: "Test name",
    children: [
      {
        id: 5,
        name: "Test name 5",
        children: [
          {
            id: 6,
            name: "Test name 6",
            children: [],
          },
        ],
      },
    ],
  },
  {
    id: 8,
    name: "Test name 8",
    children: [
      {
        id: 9,
        name: "Test name 9",
        children: [],
      },
    ],
  },
];

and I have an array of indexes where to target and update

const keys = [0,0,0]

The array of indexes should target Test name 6

How can I update Test name 6 to something else?

p.s. items and keys are dynamic. there might be dozens of nested items or dozens of indexes in keys

Nina Scholz · Accepted Answer · 2022-10-12 17:31:12Z

1

You could reduce the indices and check the children property.

After getting the final object, just assign the value to the wanted property.

const
    getItem = (children, keys) => keys.reduce(
        ({ children = [] }, i) => children[i],
        { children }
    ),
    items = [{ id: 1, name: "Test name", children: [{ id: 5, name: "Test name 5", children: [{ id: 6, name: "Test name 6", children: [] }] }] }, { id: 8, name: "Test name 8", children: [{ id: 9, name: "Test name 9", children: [] }] }],
    keys = [0, 0, 0];
    
console.log(getItem(items, keys));

answered Oct 12, 2022 at 17:31

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Owen · Accepted Answer · 2022-10-12 17:40:20Z

To update your nested array first you will first need to change it to a mutable variable, i.e. from a const to a let or var.

From there you can update the value with something like:

// Copy pasted data from your post
let items = [
  {
    id: 1,
    name: "Test name",
    children: [
      {
        id: 5,
        name: "Test name 5",
        children: [
          {
            id: 6,
            name: "Test name 6",
            children: [],
          },
        ],
      },
    ],
  },
  {
    id: 8,
    name: "Test name 8",
    children: [
      {
        id: 9,
        name: "Test name 9",
        children: [],
      },
    ],
  },
];

const keys = [0,0,0]

// <----------------- CODE BELOW ---------------->

// var to store item each time you dive deeper into the nested array
// initalize with the first item
let item = items[keys[0]].children;

// loop through each key
for(let i = 1; i < keys.length; i++){
  // if we are at the last key, set item equal to the item object
  if(i == keys.length-1){
    item = item[keys[i]];
  }
  // otherwise, set item equal to the item's children
  else{
    item = item[keys[i]].children
  }
}

// once item has been reached - all keys have been looped through - data can be minupulated
item.name = "new value"
// "Test name 6" has been updated to "new value"

emphasized text

Yanick Rochon · Accepted Answer · 2022-10-13 00:34:16Z

In this scenario, I usually use a Map referencing the items within the nested arrays. For example:

const items = [
  {
    id: 1,
    name: "Test name",
    children: [
      {
        id: 5,
        name: "Test name 5",
        children: [
          {
            id: 6,
            name: "Test name 6",
            children: [],
          },
        ],
      },
    ],
  },
  {
    id: 8,
    name: "Test name 8",
    children: [
      {
        id: 9,
        name: "Test name 9",
        children: [],
      },
    ],
  },
];

const createItemsMap = items => {
  const m = new Map();
  
  (function _collect(items) {
    for (const item of items) {
      m.set(item.id, item);
      if (item.children) {
        _collect(item.children);
      }
    }
  })(items);
  
  return m;
}

const itemsMap = createItemsMap(items);

// modify item #6
itemsMap.get(6).name = "Modified name 6";

console.log("itemsMap.get(1) === items[0] is", itemsMap.get(1) === items[0]);
console.log(items);

With that map, modifying the items is simply a matter of doing this :

const keys = [1,5,6];

for (const key of keys)
  const item = itemsMap.get(key);

  // update item
  item.name = `Updated name ${key}`;
  item.newProp = 'New value!';
}

// ex: 
console.log(items[0]);
// {
//   id: 1,
//   name: "Updated name 1",
//   newProp: "New value!',
//   children: [
//     {
//       id: 5,
//       name: "Updated name 5",
//       newProps: "New value!",
//       children: [
//         {
//           id: 6,
//           name: "Updated name 6",
//           newProps: "New value!",
//           children: [],
//         },
//       ],
//     },
//   ],
// },

And a few more freebies :

// get all existing keys
const keys = Array.from(itemsMap.keys());

// check if an item exists
const exists3 = itemsMap.has(3);  // false
const exists5 = itemsMap.has(5);  // true

// adding new children
const newChild = { id: 3, name: "Test name 3", children: [] };
// ... add as child of 5
itemsMap.get(5).children.push(newChild); 
// ... add it to the map
itemsMap.set(newChild.id, newChild);  // that's it!

// remove an item
const removed = itemsMap.get(3);
// ... find if there is a parent...
const parent = Array.from(itemsMap.values()).find(item =>
  item.children.includes(removed)
);
if (parent) {
   // ... if there is a parent, remove the child
   parent.children = parent.children.filter(item => 
      item !== removed
   );
} else {
   // ... otherwise it is a root item, so remove it
   items = items.filter(item => item !== removed);
}
// ... remove from map
itemsMap.delete(removed.id);

Note: If items is modified directly (i.e. items are added or removed), then itemsMap needs to either be re-generated, or preferably updated. In any other case, both items and itemsMap reference to the same data.

Collectives™ on Stack Overflow

Nested arrays and targeting array by keys

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related