How to add multiple data to the formBuilder.group through a for loop in angular?

Viewed 20

I have created an angular reactive form. When the form is loaded, the data coming through the endpoint is filtered and set to the form fields. Therefore, the id of the filtered data is set to the following formBuilder group. Data is filtered correctly right up to the robotList. When the length of this.automationData.emp_context is 2, the id is not set properly for the following tool-id in empContext. Every time when a data set is not one but multiple, the id is not set to the empContext correctly. I know the problem lies in the logic that filters the tool_id. How to filter multiple array object and set data to correctly this form builder?

Filtered example data set

 var robotList = [
    {
        "id": "32EF43FF-8451-4ED9",
        "url": "www.testOpenApi.xyz",
        "username": "admin01",
        "tool_name": "user_test13"
    },
    {
        "id": "50E35C98-E2C7-47B6",
        "url": "www.testOpenApi.xyz",
        "username": "admin02",
        "tool_name": "user_test19"
    },
    {
        "id": "A1D0D375-7257-47F5",
        "url": "www.testOpenApi.xyz",
        "username": "admin03",
        "tool_name": "user.test21b"
    },
]

var robotList = [
    {
        "id": "32EF43FF-8451-88SD",
        "url": "www.testOpenApi.xyz",
        "username": "admin01",
        "tool_name": "user_test13"
    },
    {
        "id": "50E35C98-E2C7-56FG",
        "url": "www.testOpenApi.xyz",
        "username": "admin02",
        "tool_name": "user_test19"
    },
    {
        "id": "A1D0D375-hfdj-1234",
        "url": "www.testOpenApi.xyz",
        "username": "admin03",
        "tool_name": "user.test21b"
    },
    {
        "id": "GH8D0D375-G766-1234",
        "url": "www.testOpenApi.xyz",
        "username": "admin03",
        "tool_name": "user.test21b"
    }
]

Data coming from endpoint

this.this.automationData.emp_context = [
    {
        "device_name": "USAM2",
        "username": "Joshep bishop",
        "dynamic_test": false,
        "tool_name": "rdp.user_test19"
    }, 0 index
    {
        "device_name": "0NKA4BD",
        "username": "John Kalis",
        "dynamic_test": false,
        "tool_name": "robotaug11a"
    } 1st index
]
private async fetchDetails(): Promise < void > {
      // Handle more async operations (fetch data and set)

      for (let i = 0; i < this.automationData.emp_context.length; i++) {
         const empContext = this.createJobForm.get('emp_context') as FormArray;

         this.robotList = // Filtered array of objects as mentioned above is set here

            const tool_id = this.robotList.find(robot => robot.tool_name === this.automationData.emp_context[i].tool_name)?.id

               // More code

               empContext.insert(0, this.formBuilder.group({
                  dynamic_test: [this.isTrue ? true : false],
                  tool_id: [tool_id] // Only the robot id of index 1 is always set correctly
               }))
            }
      }
0 Answers
Related