迭代Angular 9中的对象答案

【问题标题】：Iterate through Object in Angular 9迭代Angular 9中的对象
【发布时间】：2020-07-10 10:22:53
【问题描述】：

我想从 Angular 9/Typescript 中的 JSON 响应中迭代对象响应。我尝试搜索相同的结果，但其他结果并没有帮助我。下面是我的 JSON，我想遍历“详细信息”，以便我可以提取每个节点，如“个人详细信息”、“工作详细信息”和“电话号码”，以制作动态表格。谢谢。

注意：我正在尝试使用 .ts 中的函数而不是 *ngFor 中的函数。

"details":
{
  "personalDetails":
  {
    "title" :"Personal Details",
    "fields":
    [
      {
        "label":"First Name",
        "type":"text",
        "validation":
        {
          "required":true
        }
      },
      {
        "label":"Last Name",
        "type":"text",
        "validation":
        {
          "required":true
        }
      }
    ]
  },
  "workDetails":
  {
    "title" :"Work Related Details",
    "fields":
    [
      {
        "label":"Company Name",
        "type":"text",
        "validation":
        {
          "required":true
        }
      },
      {
        "label":"Date Of Joining",
        "type":"date",
        "validation":
        {
          "required":true
        }
      }
    ]
  },
  "phoneNumberDetails":
  {
    "title" :"Phone Number Details",
    "fields":
    [
      {
        "label":"Primary Contact",
        "type":"number",
        "validation":
        {
          "required":true
        }
      },
      {
        "label":"Secondary Contact",
        "type":"number",
        "validation":
        {
          "required":false
        }
      }
    ]
}

【问题讨论】：

您是否尝试将personalDetails、workDetails 和phoneNumberDetails 属性设置为一个值？这是更大的对象/数组的一部分，还是例如来自 API 的响应，您只是专门获取一个人的详细信息？
我得到的响应比“详细信息”要大得多。它只是我回应中的另一个节点。我想在“详细信息”中存在的对象内循环。
我试图将我的特定节点从一个对象转换为一个数组： return Object.keys(my_obj).map((key)=> { return my_obj[key] });但这没有帮助
根据您真正想要做的事情，我在下面的答案中附加了一个代码 sn-p。如果您需要，请随时要求我详细说明！

标签： javascript angular typescript oop object

【解决方案1】：

Object.keys(result).forEach((key)=>{ const value = result[key]; }) 是如何遍历一个对象。

我创建了 stackblitz 来展示它是如何完成的。

https://stackblitz.com/edit/angular-material-starter-xfae4t

【讨论】：

这个很完美，我得到了我想要做的。但我正在使用 ngx-formly 来做这件事。所以我需要迭代思想嵌套对象和数组。
但我又是如何遍历对象以便为 ngx-formly 创建自定义对象
这真的很容易。创建一个对象 [A] 并像我一样循环遍历您的数据对象 [B] 并使用您喜欢的结构更新 [A]。并且还使用 [A] 的 FormlyFieldConfig 接口在更新它时获得一些帮助。如果你没有得到它，请告诉我，所以我为你创建另一个 stackblitz。

【解决方案2】：

returnedDetails = {
  details: {
    personalDetails: {
      title: "Personal Details",
      fields: [{
          label: "First Name",
          type: "text",
          validation: {
            required: true
          }
        },
        {
          label: "Last Name",
          type: "text",
          validation: {
            required: true
          }
        }
      ]
    },
    workDetails: {
      title: "Work Related Details",
      fields: [{
          label: "Company Name",
          type: "text",
          validation: {
            required: true
          }
        },
        {
          label: "Date Of Joining",
          type: "date",
          validation: {
            required: true
          }
        }
      ]
    },
    phoneNumberDetails: {
      title: "Phone Number Details",
      fields: [{
          label: "Primary Contact",
          type: "number",
          validation: {
            required: true
          }
        },
        {
          label: "Secondary Contact",
          type: "number",
          validation: {
            required: false
          }
        }
      ]
    }
  }
};

// After setting up the object like you have, we have to make sure we
// look at the details property specifically.
for (let key of Object.keys(returnedDetails.details)) { 
  let detail = returnedDetails.details[key];
  console.log(detail.title);
  console.log(detail.fields);
}

【讨论】：

这个错误...让我们忘记返回的详细信息我如何只使用详细信息部分来做到这一点？请详细说明一下。
您是否要求将变量命名为 details 并在其中包含 3 个对象？