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