Рекурсивная функция для перебора вложенных в объект объектов

Question

Есть объект, с вложенными объектами, я хочу чтоб каждая пара ключ:значение попадали в тег <li>, если значение это объект, то в теге <li> будет <ul> c <li> вложенного объекта. Как написать рекурсивную функцию для этого?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test222</title>
  </head>
  <body>
    <div id="container"></div>

    <script>
      const container = document.getElementById("container");
      const user = {
        id: 1,
        name: "Leanne Graham",
        username: "Bret",
        email: "[email protected]",
        address: {
          street: "Kulas Light",
          suite: "Apt. 556",
          city: "Gwenborough",
          zipcode: "92998-3874",
          geo: {
            lat: "-37.3159",
            lng: "81.1496"
          }
        },
        phone: "1-770-736-8031 x56442",
        website: "hildegard.org",
        company: {
          name: "Romaguera-Crona",
          catchPhrase: "Multi-layered client-server neural-net",
          bs: "harness real-time e-markets"
        }
      };


      let ul = document.createElement("ul");
      Object.entries(user).forEach(([key, value]) => {
        let li = document.createElement("li");

        if (typeof value == "object") {
          li.textContent = `${key}: `;
          let ul = document.createElement("ul");
          Object.entries(value).forEach(([key, value]) => {
            let li = document.createElement("li");
            li.textContent = `${key}: ${value}`;
            ul.appendChild(li);
          });
          li.appendChild(ul);
        } else {
          li.textContent = `${key}: ${value}`;
        }

        ul.appendChild(li);
      });
      container.appendChild(ul);

/* У меня получился такой вариант, но у него неправильный вывод
  function parseUser([key, value]) {
    let li = document.createElement("li");

    if (typeof value == "object") {
      Object.entries(value).forEach(parseUser);
      li.textContent = `${key}: `;

      let ul2 = document.createElement("ul");
      li.appendChild(ul2);

      console.log(ul2);
    } else {
      li.textContent = `${key}: ${value}`;
    }
    ul.appendChild(li);
  }
  Object.entries(user).forEach(parseUser);
*/

    </script>
  </body>
</html>

Answer 1

Я дополнил вашу функцию принятием параметра nestedList (ul), чтобы знать в какой именно список добавлять вложенные элементы. Не уверен, что как-то можно это сделать через forEach, поэтому я вызываю функцию вручную проходя массив Object.entries через цикл for

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>test222</title>
</head>

<body>
  <div id="container"></div>

  <script>
    const container = document.getElementById("container");
    const user = {
      id: 1,
      name: "Leanne Graham",
      username: "Bret",
      email: "[email protected]",
      address: {
        street: "Kulas Light",
        suite: "Apt. 556",
        city: "Gwenborough",
        zipcode: "92998-3874",
        geo: {
          lat: "-37.3159",
          lng: "81.1496"
        }
      },
      phone: "1-770-736-8031 x56442",
      website: "hildegard.org",
      company: {
        name: "Romaguera-Crona",
        catchPhrase: "Multi-layered client-server neural-net",
        bs: "harness real-time e-markets"
      }
    };


    let ul = document.createElement("ul");

    function processNestedItem(list, key, value) {
      let li = document.createElement("li");
      if (typeof value == "object") {

        li.textContent = `${key}: `;
        var nestedValues = Object.entries(value);

        for (var i = 0; i < nestedValues.length; i++) {
          let nestedList = document.createElement("ul");
          processNestedItem(nestedList, nestedValues[i][0], nestedValues[i][1]);

          li.appendChild(nestedList);
        }
      } else {
        li.textContent += `${key}: ${value}`;
      }
      list.appendChild(li);
    }

    var entries = Object.entries(user);
    for (var i = 0; i < entries.length; i++) {
      processNestedItem(ul, entries[i][0], entries[i][1]);
    }

    container.appendChild(ul);
  </script>
</body>

</html>

БЛОГ НА HUSL

Рекурсивная функция для перебора вложенных в объект объектов

Ответы (1 шт):