Javascript 循环通过对象的对象

因此，我有以下函数代码：

function get_menu(menu_id) {
    wp.api.loadPromise.done(function() {
        const menus = wp.api.collections.Posts.extend({
            url: wpApiSettings.root + 'menus/v1/menus/' + menu_id,
        });
        const Menus = new menus();
        Menus.fetch().then(
            posts => {
            let post_list = posts.items;
            console.log(post_list);
        });
    });
}
get_menu(4);

这为我提供了一个对象对象，如下所示：

在这些对象中循环并在其中呈现HTML的最佳方式是什么？假设我想循环遍历每个对象，获取

post\u title

并输出HTML

+post\u title+

所有的帮助将不胜感激

更新：

需要在循环中呈现此内容：

<div class="column is-one-third is-flex py-0">
    <a href=" ***url*** " class="dropdown-item px-2 is-flex is-align-items-center">
        <figure class="image is-32x32 is-flex">
            <img src=" ***image*** + ***post_title*** '.svg'; ?>">
        </figure>
        <span class="pl-2"><?= ***post_title*** ?></span>
    </a>
</div>

---

您可以遍历数组并创建dom树

function get_menu(menu_id) {
  wp.api.loadPromise.done(function () {
    const menus = wp.api.collections.Posts.extend({
      url: wpApiSettings.root + 'menus/v1/menus/' + menu_id,
    });
    const Menus = new menus();
    Menus
      .fetch()
      .then(posts => {
        let post_list = posts.items;
        // Map through response data and turn objects into elements
        const postElements = post_list.map(createDomTree)
        // spread all elements from array into arguments for the append method
        document.body.append(...postElements)
      });
  });
}

function createDomTree(post) {
  // I'm not sure if these values are available in the response data, but can be replaced
  const { post_url, post_title, post_image } = post
  const container = document.createElement('div')
  container.className = 'column is-one-third is-flex py-0'
  const anchor = document.createElement('a')
  anchor.href = post_url
  anchor.className = 'dropdown-item px-2 is-flex is-align-items-center'
  const figure = document.createElement('figure')
  figure.className = 'image is-32x32 is-flex'
  const img = document.createElement('img')
  img.src = `${post_image}${post_title}.svg`
  const span = document.createElement('span')
  span.className = 'pl-2'
  span.textContent = post_title
  figure.appendChild(img)
  anchor.append(figure, span)
  container.appendChild(anchor)
  return container
}

get_menu(4);

---

您可以遍历数组并创建dom树

function get_menu(menu_id) {
  wp.api.loadPromise.done(function () {
    const menus = wp.api.collections.Posts.extend({
      url: wpApiSettings.root + 'menus/v1/menus/' + menu_id,
    });
    const Menus = new menus();
    Menus
      .fetch()
      .then(posts => {
        let post_list = posts.items;
        // Map through response data and turn objects into elements
        const postElements = post_list.map(createDomTree)
        // spread all elements from array into arguments for the append method
        document.body.append(...postElements)
      });
  });
}

function createDomTree(post) {
  // I'm not sure if these values are available in the response data, but can be replaced
  const { post_url, post_title, post_image } = post
  const container = document.createElement('div')
  container.className = 'column is-one-third is-flex py-0'
  const anchor = document.createElement('a')
  anchor.href = post_url
  anchor.className = 'dropdown-item px-2 is-flex is-align-items-center'
  const figure = document.createElement('figure')
  figure.className = 'image is-32x32 is-flex'
  const img = document.createElement('img')
  img.src = `${post_image}${post_title}.svg`
  const span = document.createElement('span')
  span.className = 'pl-2'
  span.textContent = post_title
  figure.appendChild(img)
  anchor.append(figure, span)
  container.appendChild(anchor)
  return container
}

get_menu(4);

---

控制台中显示的结果实际上是一个对象数组。因此，您只需遍历数组，根据您的意愿处理每个元素包含的信息。请注意，第一行的第五个和最后一个字符是

[

和

]

。控制台中显示的结果实际上是一个对象数组。因此，您只需遍历数组，根据您的意愿处理每个元素包含的信息。请注意，第一行的第五个和最后一个字符是

[

和

]

。谢谢@Uzair，这输出效果很好！因此，我是否需要调用return，或者我是否可以调用

get\u menu（4）

，div将自动渲染？另外，假设我想要的不仅仅是文章标题和一个大的HTML正文，我会继续添加还是我该如何构建一个大的DOM树？这是完全正确的，如果你能用准确的HTML结构编辑你的文章，我可以让你更好地理解。非常感谢！现在更新，请给我第二个。嘿，Uzair，我在底部的帖子中更新了完整的HTML，我添加了***指示符，这将是对象字段。@DevSem更新了代码，很多代码解释得不是很好，但我可以在有时间的时候提供一些文档链接。谢谢@Uzair，这输出得很好！因此，我是否需要调用return，或者我是否可以调用

get\u menu（4）

，div将自动渲染？另外，假设我想要的不仅仅是文章标题和一个大的HTML正文，我会继续添加还是我该如何构建一个大的DOM树？这是完全正确的，如果你能用准确的HTML结构编辑你的文章，我可以让你更好地理解。非常感谢！现在更新，请稍候。嘿，Uzair，我在底部的帖子中更新了完整的HTML，我添加了***指示符，这将是对象字段。@DevSem更新了代码，很多代码没有解释清楚，但我可以在有时间的时候提供一些文档链接。