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   

          });

A shot in the dark, but one difference between PATCH and other methods using fetch is the CORS. In short, it could have to do with your backend. Does the non-simple requests section of this documentation solve your problem?: javascript.info/fetch-crossorigin — Shaun E. Tobias
– Shaun E. Tobias, Commented Mar 2, 2020 at 3:22
@xxMrPHDxx the problem is if there is no data in joins tables for an employee then patch value wont work and the output is empty form — Mohd Akram
– Mohd Akram, Commented Mar 2, 2020 at 5:24
@MohdAkram - so the problem is that DB query (sql?) return empty results (if there is no data in joins) ? — Kamil Kiełczewski
– Kamil Kiełczewski, Commented Mar 3, 2020 at 10:36
@KamilKiełczewski this joins tables are optional like its not necessary to add data in all tables or form fields so this is expected to sql return empty data in any of these table — Mohd Akram
– Mohd Akram, Commented Mar 3, 2020 at 11:05

Ramarao Akula · Accepted Answer · 2020-03-03 11:20:49Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related