Iterate through Object in Angular 9

Question

I want to iterate through the object response from my JSON response in Angular 9/Typescript. I tried searching for the same but other results didn't help me out. Below is my JSON, I want to iterate through "details" such that I can extract every node like "personal details", "work details", and "phone number" to make a dynamic form. Thank You.

Note: I am trying to do it using a function from .ts not from *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
        }
      }
    ]
}

Are you trying to set the personalDetails, workDetails, and phoneNumberDetails properties to a value? is this part of a bigger object/array or would this be, say for example a response from an API where you're just getting one one persons details specifically? — Tucker, Jul 10 '20 at 10:26
I am getting much bigger response than "details". It just another node in my response. I want to loop inside the objects present in "details". — Vishal Sharma, Jul 10 '20 at 10:29
I tried to convert my specific node into an array from an object with: return Object.keys(my_obj).map((key)=> { return my_obj[key] }); but this didn't help — Vishal Sharma, Jul 10 '20 at 10:30
Depending what you're exactly trying to do, I attached a code snippet in the answer below. Feel free to ask me to elaborate if you need! — Tucker, Jul 10 '20 at 11:12
Take a look at this answer: https://stackoverflow.com/a/74827855/6666348 — Kamran Taghaddos, Dec 16 '22 at 17:32

score 0 · Answer 1 · answered Jul 10 '20 at 11:11

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);
}

Getting an error with this one...let's forget returnedDetails how can I do it with only details part? Can you elaborate please. — Vishal Sharma, Jul 10 '20 at 12:08
Are you asking for the variable to be named details and have the 3 objects inside of that? — Tucker, Jul 10 '20 at 17:37

score 0 · Accepted Answer · answered Jul 10 '20 at 11:31

0

Object.keys(result).forEach((key)=>{ const value = result[key]; }) is how you can iterate through an object.

I created stackblitz that shows how it can be done.

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

answered Jul 10 '20 at 11:31

Eric Aska

611
5
14

This one is perfect I got what I am exactly trying to do. But I am doing that using ngx-formly. So I need to iterate thought nested objects and array. – Vishal Sharma Jul 10 '20 at 12:06
But again How I iterate through object so that I can create my customized object for ngx-formly – Vishal Sharma Jul 10 '20 at 12:14
That is really easy. create an object [A] and just loop over your data object [B], like I did and update [A] with the structure you like. And also use FormlyFieldConfig interface for [A] to get some help while updating it. let me know if you didn't get it so I create another stackblitz for you. – Eric Aska Jul 10 '20 at 17:31

Iterate through Object in Angular 9

2 Answers2