how to get data in array form from node API to use in Angular *ngFor

Question

I am getting error when I use the data received from node API (mongoDB collection) in Angular *ngFor.

The error states that the data should be in array form to be used in *ngFor. In console log statement of API, I can see that the data is in the array form But in the console log statement in component.ts - the devtools show it as an object.

How do I get the data in pure array form?

API controller :

exports.getNonuserEmployees = (req, res, next) => {
  let docQuery;

  docQuery = employee.find({ userName: { $eq: '' }});

  docQuery.sort('fName')
    .select('_id fName lName coEmail')
    .then( documents => {
        console.log(documents);
        res.status(200).json({
            nonuserEmployees: documents
        })
    })
    .catch(err => {
        res.status(500).json({
            message: "Server Error in fetching Clients data!"
        });
    });
}

Angular service which reaches the above api controller method :

getNonUserEmployees(){
    return this.httpClient.get<any>(this.reqUrl+'/nonuser');
}

Component.ts :

export class AdminAccountsComponent implements OnInit {
    form: FormGroup;

    nonuserEmployees = [{
        employeeId: '',
        fName: '',
        lName: '',
        email: ''
    }];

    ngOnInit() {
        // ..code
    }

    this.employeesService.getNonUserEmployees()
        .subscribe(emps => {
            this.nonuserEmployees = emps;
            console.log(emps);
        }
    );
}

Component.html :

<mat-form-field class="w-12rem">
    <mat-label>Select Employee</mat-label>
    <mat-select matInput formControlName="employeeName">
        <mat-option *ngFor="let e of nonuserEmployees" [value]="e.fName">
            {{ e.fName }}
        </mat-option>
    </mat-select>
</mat-form-field>

Result :

Quentin · Accepted Answer · 2020-11-03 09:02:56Z

1

Solution 1 : Change the result of the API

exports.getNonuserEmployees = (req, res, next) => {
  let docQuery;

  docQuery = employee.find({ userName: { $eq: '' }});

  docQuery.sort('fName')
    .select('_id fName lName coEmail')
    .then( documents => {
        console.log(documents);
        res.status(200).json(documents)
    })
    .catch(err => {
        res.status(500).json(err);
    });
}

Solution 2 : Format the result on the front-end

this.employeesService.getNonUserEmployees().subscribe(
  emps => {
    this.nonuserEmployees = Object.values(emps).flat();
    console.log(emps);
  }
);

Exemple :

var emps = {
  nonuserEmployees: [
    {
      coEmail: "[email protected]",
      fName: "fName_1",
      lName: "lName_1",
      _id: "A1"
    },
    {
      coEmail: "[email protected]",
      fName: "fName_2",
      lName: "lName_2",
      _id: "B2"
    }
  ]
};

console.log(Object.values(emps).flat());

edited Nov 3, 2020 at 9:02

answered Oct 26, 2020 at 15:28

Quentin

1,9232 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hemant Over a year ago

Thanks Quentin. The error has gone. But the Select element does not display the mat-option. As of now I have only one element in the array.

Quentin Over a year ago

You can use the flat() method which allows you to join your objects in the same list. I modified my answer with an example.

Quentin Over a year ago

Another possibility that you can try is to send the list directly from the API in this way : res.status(200).json(documents)

hemant Over a year ago

this -- res.status(200).json(documents) -- worked. I was earlier sending as res.status(200).json({result: documents}) - which was probably the issue.

Collectives™ on Stack Overflow

how to get data in array form from node API to use in Angular *ngFor

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related