ERROR Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Question

my route.js

const express = require('express');
const router = express.Router();
const University = require('../models/university');
var mongo = require('mongodb').MongoClient;
var assert = require('assert');




var url = 'mongodb://localhost:27017/universitylist';

//retrieving data
//router.get('/universities',(req,res,next)=>{
  //  University.find(function(err,universities){
    //    if(err)
      //  {
        //    res.json(err);
        //}
       // res.json(universities);
    //});
//});

router.get('/usa', function(req, res, next) {
  var resultArray = [];
  mongo.connect(url, function(err, db) {
    assert.equal(null, err);
    var cursor = db.db('universitylist').collection('us').find();
    cursor.forEach(function(doc, err) {
      assert.equal(null, err);
      resultArray.push(doc);
    }, function() {
     db.close();
     res.json({universities: resultArray});
    });
  });
});

module.exports= router;

this backend process working properly..

my university.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import {University} from './university';
import 'rxjs/Rx';


@Injectable({
  providedIn: 'root'
})
export class UniversityService {

  constructor(private http:Http) { }

//retrieving UniversityService
  getUniversities()
  {
    return this.http.get('http://localhost:3000/api/usa').map(res => res.json());
  }

}

my universitylist.component.ts

import { Component, OnInit } from '@angular/core';
import {UniversityService} from '../university.service';
import {University} from '../university';
@Component({
  selector: 'app-universitylist',
  templateUrl: './universitylist.component.html',
  styleUrls: ['./universitylist.component.css'],
  providers:[UniversityService]
})
export class UniversitylistComponent implements OnInit {
  universities: University[];


  constructor(private universityService:UniversityService) { }

  ngOnInit() {
    this.universityService.getUniversities()
        .subscribe( universities => 
        this.universities = universities);
  }

}

universitylist.component.html

<h1>University list</h1>
<div *ngFor="let university of universities">
  <li>{{university.universityname}}</li>
</div>

If i run front end process i am getting error in console that,

UniversitylistComponent.html:2 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges (vendor.js:3229)
    at checkAndUpdateDirectiveInline (vendor.js:40326)
    at checkAndUpdateNodeInline (vendor.js:41594)
    at checkAndUpdateNode (vendor.js:41556)
    at debugCheckAndUpdateNode (vendor.js:42189)
    at debugCheckDirectivesFn (vendor.js:42149)
    at Object.eval [as updateDirectives] (UniversitylistComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:42141)
    at checkAndUpdateView (vendor.js:41538)
    at callViewAction (vendor.js:41779)

How can I resolve this error, if anyone knows please, help me... I don't know where I did a mistake in the frontend. I've searched but I cannot find anything.

Answer 1

Your backend returns an object, not an array:

res.json({universities: resultArray}); // => {universities: [{...}, {...}]}

So, when you make the http request, retrieve the array from the response:

this.http.get('http://localhost:3000/api/usa').map(res => res.json().universities) // Might need a null check here

side note: You're still using the HttpModule , which is deprecated. You should switch to the HttpClientModule .