Angular2 simple Http service Injection

Question

Hi I am trying to make a get request using the Http service in Angular2.

but Chrome shows the following error in console :

EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null] angular2.dev.js:21835 
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null]BrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn  @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]'BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4440(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4443(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
Error: Cannot find a differ supporting object '[object Object]'
at new BaseException (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:16034:21)
at IterableDiffers.find (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:5124:15)
at NgFor.Object.defineProperty.set [as ngForOf] (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:15224:48)
at AbstractChangeDetector.ChangeDetector_FormApp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20415:14), <anonymous>:2662:37)
at AbstractChangeDetector.detectChangesInRecords (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20209:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20192:12)
at AbstractChangeDetector._detectChangesInShadowDomChildren (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20259:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20196:12)
at AbstractChangeDetector._detectChangesInLightDomChildren (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20253:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20193:12)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4444(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4447(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
_Context {element: script, componentElement: form-app, context: FormApp, locals: Object, injector: Injector…}BrowserDomAdapter.logError @  angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4448(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null]

here is my code:

enrollmentService.ts

import {Component,CORE_DIRECTIVES, Injectable, Inject } from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';


@Component({
selector: 'employee-enrollment',
directives: [CORE_DIRECTIVES],
providers: [HTTP_PROVIDERS]

})


@Injectable()
export class EnrollmentService {

    nationality: Array<any>;
   _http: any;
    constructor( @Inject(Http) http: Http) {

        this._http = http;
    }
    getItems() {

      return this._http.get('static/components/HR/employee_enrollment_form/json/nationality.json')
            .map(res => res.json())
            .subscribe(nationality => this.nationality = nationality);

    }

}

Enrollment.ts

import {Component, View, Inject, Injectable, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {EnrollmentService} from '../../../services/employeeEnrollmentService';

@Component({
    selector: 'form-app',
    template:`
      <div class="col-sm-8">
           <select class="col-sm-6 form-control" [(ng-model)]="employeeData.nationality">
             <option value="">-- select one --</option>
             <option *ng-for="#ndata of nationality" [value]="ndata.value">{{ndata.value}}</option>
           </select>
      </div>`

    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    providers: [EnrollmentService],
})

@Injectable()
export class FormApp {

    nationality:Array<any>;
    enrollmentService:EnrollmentService;

    constructor(@Inject(EnrollmentService) enrollmentService:EnrollmentService) {

        this.nationality = enrollmentService.getItems();

        this.employeeData = {

        "first_name": "",
        "middle_name": "",
        "last_name": "",
        "date_of_birth": "",
        "nationality": "",
        "mobile_number": "",
        "home_address": "",
        "pin_code": "",
        "subject": "",
        "category": "",
        "city": "",
        "state": "",
        "country": "",
       };

    }
}

I looked at http://jbavari.github.io/blog/2015/10/19/angular-2-injectables/ but can't see whats wrong.

ng-for doesn't iterate over objects, you must enclose the object in an array. — Eric Martinez
– Eric Martinez, Commented Nov 23, 2015 at 12:56

Günter Zöchbauer · Accepted Answer · 2015-12-10 13:06:36Z

1

i got answer for this question:

enrollmentService.ts

getItems() {

  return this._http.get('static/components/HR/employee_enrollment_form/json/nationality.json')
        .map((responseData) => {
            return responseData.json();
         });

}

Enrollment.ts

constructor(@Inject(EnrollmentService) enrollmentService:EnrollmentService) {

        enrollmentService.getItems().subscribe(res => this.nationality = res);;
}

edited Dec 10, 2015 at 13:06

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

answered Nov 24, 2015 at 11:17

Nayyar Jamal

3533 silver badges14 bronze badges

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

5 Comments

Murhaf Sousli Over a year ago

I'm always getting red line under json() when I call it from inside .map() !

Nayyar Jamal Over a year ago

did you bind your http scope with this._http ??

user1714346 Over a year ago

@Murhaf Sousli Do you reference import 'rxjs/add/operator/map'; correctly in your file?

Murhaf Sousli Over a year ago

it's fine now, I fixed it. and yupp I have to import operators manually @user1714346

Coaden Over a year ago

I had the .map undefined as well, added the following at the top of the file: import 'rxjs/add/operator/map'

Collectives™ on Stack Overflow

Angular2 simple Http service Injection

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related