Как создать дочерний объект внутри массива на каждый клик в JavaScript

Question

Я хочу вставлять объект как дочерний элемент существующего последнего объекта при каждом нажатии кнопки.

Это мой код:

const Myarray = [
    { id: 1, child:[] }
]

handleArrayDepth = (Myarray) => {

    Myarray.map(arrayitem => {
      let id = arrayitem.id;
      id++;
      arrayitem.child.push({
        id: id,
        child: []
      });
      if (id < 2) {
        this.handleArrayDepth(arrayitem.child);
      }
    });
};
console.log(Myarray);

Это журнал моего исходного массива.

0:{
  id: 1,
  child: []
}

Если я нажал кнопку 2 раза, я получил вывод, как это:

0:{
  id: 1,
  child: [
    0:{
      id: 2,
      child: []
    },
    1:{
      id: 3,
      child: []
    }
  ]
}

Но я хочу что-то вроде ниже:

0:{
  id: 1,
  child: [
    0:{
      id: 2,
      child: [
        0:{
          id: 3,
          child: []
        }
      ]
    }
  ]
}

Это должно происходить для каждого клика рекурсивно / бесконечно. Я не мог найти эффективный способ сделать это.

Answer 1

Некоторые проблемы

• Не используйте Array в качестве имени переменной
• Не используйте карту, если вы не возвращаете значения из нее или не изменяете значения
• array.id не имеет смысла, так как в исходном коде нет переменной array

Вы можете немного изменить свой код, сделать рекурсивный вызов, если длина дочернего элемента больше 0, или нажать значение

const array = [{id: 1,child: []}]

handleArrayDepth = (arr) => {
  arr.forEach(({id,child}) => {
    id++;
    if (child.length) {
      handleArrayDepth(child);
    } else {
      child.push({id: id, child: [] });
    }
  });
};
handleArrayDepth(array)
handleArrayDepth(array)
console.log(array);

Answer 2

Как насчет использования функции закрытия вместо

const data = [];

const handleArrayDepth = (function() {
    let id = 1;
    return function(arr) {
        if (!arr.length) {
            arr.push({ id: id, child: [] });
        } else {
            id = arr[0].id + 1;
            handleArrayDepth(arr[0].child);
        }
    }
})();

function handleClick() {
 const ul = document.getElementById("list");
 let item = document.createElement("li");
 handleArrayDepth(data);
 item.innerHTML = JSON.stringify(data);
 ul.appendChild(item);
}

document.getElementById("handler").addEventListener("click", handleClick);

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

ul li {
 padding: 10px 10px;
 border: 1px solid #ccc;
 margin: 5px 0;
 border-radius: 4px;
}

<button id = "handler">Click Me!</button>
<ul id = "list">

</ul>

Answer 3

Может быть проще иметь постоянную переменную, ссылающуюся на последний вставленный объект:

const array = [{
  id: 1,
  child: []
}];
let lastParent = array[0];

const handleArrayDepth = () => {
  const { id, child } = lastParent;
  lastParent = { id: id + 1, child: [] };
  child.push(lastParent);
};

handleArrayDepth();
handleArrayDepth();
console.log(array);