how to move elements in nested array of objects in javascript

Question

I saw these two questions:

1. Javascript move objects in a nested array
2. How to move element in nested array

But they do not work for me.

So I have a nested dynamic array like this:

const data = [
  {
    id: 1,
    subData: [
      {
        id: 2,
        subData: []
      },
      {
        id: 3,
        subData: [
          {
            id: 4,
            subData: []
          }
        ]
      }
    ]
  },
  {
    id: 5,
    subData: []
  },
  .
  .
  .
]

I have to move the nested elements with their "id". For example, how can I write a function that gives me the following result:

const data = [
  {
    id: 1,
    subData: [
      {
        id: 2,
        subData: []
      },
      {
        id: 3,
        subData: [] // object with id 4 was here
      }
    ]
  },
  {
    id: 5,
    subData: []
  },
  {
    id: 4, // now its here
    subData: []
  }
  .
  .
  .
]

What I've tried so far is to write the following function to first find an element with a specific "id" and then move that object:

const findObjById = (obj, key, value) => {
  if (obj[key] === value) {
    return obj;
  }

  const keys = Object.keys(obj);
  for (let i = 0; i < keys.length; i++) {
    const k = keys[i];

    if (obj[k] && typeof obj[k] === 'object') {
      const found = findObjById(obj[k], key, value);

      if (found) {
        return found;
      }
    }
  }
}

Works to find a specific object. But I could not move the found object

Answer 1

Here is an example using a generic traverse function which accepts a visitor callback which is run on each iteration of the traversal and based on the return value of the visitor either returns or continues. (see this answer for more discussion).

We can then create a splice_source traversal which accepts an object to traverse and a predicate to match by and returns the matched element after splicing it from its parent array, and a find_target_array which will return the subData array from an object that matches the passed predicate.

It only remains to push the retrieved source object to the retrieved target array.

This is just an example and will need error checking and streamlining for your particular use cases, but it illustrates some flexible techniques which may be useful moving forward.

const data = [{ id: 1, subData: [{ id: 2, subData: [], }, { id: 3, subData: [{ id: 4, subData: [], },], },], }, { id: 5, subData: [], },];

// generic 'traverse' which accepts a 'visitor' callback
function traverse(o, fn) {
  for (const k in o) {
    const res = fn.apply(this, [o, k]);
    if (res) {
      return res;
    }
    if (o[k] !== null && typeof o[k] == 'object') {
      const res = traverse(o[k], fn);
      if (res) return res;
    }
  }
}

// create custom 'visitors' to retrieve source and target arrays
const splice_source = (obj, predicate) =>
  traverse(
    obj,
    // 'visitor' callback
    (o, k) => {
      let m_index = -1;
      if (Array.isArray(o[k])) {
        m_index = o[k].findIndex((o) => predicate(o, k));
      }

      return m_index !== -1 ? o[k].splice(m_index, 1)[0] : false;
    });

const find_target_array = (obj, predicate) => 
  traverse(
    obj,
    // 'visitor' callback
    (o, k) => (predicate(o, k) ? o.subData : false)
  );

// move {id: 4} to subData array of {id: 5}
const source_object = splice_source(data, (obj) => obj?.id === 4);
const target_array = find_target_array(data, (obj) => obj?.id === 5);

target_array.push(source_object);
console.log(JSON.stringify(data, null, 2));

// move {id: 3} to top level 'data' array
data.push(splice_source(data, (obj) => obj?.id === 3));
console.log(JSON.stringify(data, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }