issue in fatching array of object through http request in patch value method

Question

I am creating a mean stack project i want to display array of objects values in a edit form so the problem is when i recieve data from all tables from backend it will work fine and show data in forms but when any of table table data is not present http request patch value method dosnt work and it show a empty form

json structure

"data": {
    "id": 7,
    "location": "Bikaner",
    "empId": "ct141",
    "firstName": "mahendra",
    "lastName": "chauhan",
    "dateOfBirth": "1984-09-11",
    "gender": "male",
    "emp_Edus": [
        {
            "id": 2,
            "university": "MGSU",
            "degree": "bca",
            "eduStart": "2012-06-06",
            "eduEnd": "2015-06-02",
    ],
    "emp_Pre_Job_Details": [
        {
            "id": 2,
            "company": "I tech",
            "designation": "Manager",
            "preJobStart": "2016-08-11",
            "preJobEnd": "2020-02-12",
        }
    ],
    "emp_Current_JobSta": [
        {
            "id": 2,
            "jobStatus": "Contractual",
            "start": "2020-02-02",
            "end": "2023-02-02",
            "jobTitle": "Manager",
            "accessReq": "1",
            "supervisor": "",
        }
    ]
}

patch value request

 loadEmpData(id)
{
  const formData = new FormData();
  formData.append("id", id);
  console.log("formData" + formData);
  this.cs.empprofile(id).subscribe(response => {
    if (response.status == 1) {

      this.empData = response.data;
      this.empEdusData = response.data.emp_Edus;
      this.empcurrentJob = response.data.emp_Current_JobSta;
      this.empPreJobData= response.data.emp_Pre_Job_Details;
      this.editEmpForm.patchValue({
      photograph: response.data.photograph,
      empId: response.data.empId,
      firstName: response.data.firstName,
      lastName:response.data.lastName,
      gender: response.data.gender,

      university: response.data.emp_Edus[0].university,
        degree: response.data.emp_Edus[0].degree,
        eduStart: response.data.emp_Edus[0].eduStart,
        eduEnd: response.data.emp_Edus[0].eduEnd,

        company: response.data.emp_Pre_Job_Details[0].company,
        designation: response.data.emp_Pre_Job_Details[0].designation,
        preJobStart:response.data.emp_Pre_Job_Details[0].preJobStart,
        preJobEnd: response.data.emp_Pre_Job_Details[0].preJobEnd,

        jobTitle: response.data.emp_Current_JobSta[0].jobTitle,
        start: response.data.emp_Current_JobSta[0].start,
        end: response.data.emp_Current_JobSta[0].end,
        jobStatus:  response.data.emp_Current_JobSta[0].jobStatus, 
        supervisor  : response.data.emp_Current_JobSta[0].supervisor   

          });

Answer 1

In your case you are getting data from backend, you can verify it in the network it will be there. In the patch you are trying to retrieve table data using 0 index as response.data.emp_Edus[0], but if the response doesn't have data in the 0'th index then it will throw an error.

what you need to do is! before retrieving particular table data, just verify whether emp_Edus is not null, and length > 0, then retrieve it. Same validation you need to do for other two tables.

try in the below way!

let myForm = {};
myForm = {
      photograph: response.data.photograph,
      empId: response.data.empId,
      firstName: response.data.firstName,
      lastName:response.data.lastName,
      gender: response.data.gender
};
if(response.data.emp_Edus != null && response.data.emp_Edus.length>0){
    myForm.university= response.data.emp_Edus[0].university;
    myForm.degree= response.data.emp_Edus[0].degree;
    myForm.eduStart= response.data.emp_Edus[0].eduStart;
    myForm.eduEnd= response.data.emp_Edus[0].eduEnd;
}
if(response.data.emp_Pre_Job_Details != null && response.data.emp_Pre_Job_Details.length>0){
    myForm.company= response.data.emp_Pre_Job_Details[0].company;
    myForm.designation= response.data.emp_Pre_Job_Details[0].designation;
    myForm.preJobStart=response.data.emp_Pre_Job_Details[0].preJobStart;
    myForm.preJobEnd= response.data.emp_Pre_Job_Details[0].preJobEnd;
}
if(response.data.emp_Current_JobSta != null && response.data.emp_Current_JobSta.length>0){
    myForm.jobTitle= response.data.emp_Current_JobSta[0].jobTitle;
    myForm.start= response.data.emp_Current_JobSta[0].start;
    myForm.end= response.data.emp_Current_JobSta[0].end;
    myForm.jobStatus=  response.data.emp_Current_JobSta[0].jobStatus; 
    myForm.supervisor  = response.data.emp_Current_JobSta[0].supervisor; 
}       

});
this.editEmpForm.patchValue(myForm);