CODEWITHSUNDEEP
jsonangulartypescript
Haseoh
Haseoh

Reputation: 930

Angular2 - cannot display json objects

my boss decided to implement Angular2 into our project. I'm preety new to this technology. I'm trying to display JSON from url, but the result is not as I expected. *ngFor doesn't display any data.

This is the code:

vehicle.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    constructor(private http: Http){ }

    getVehicle() {
        return this.http.get('https://jsonplaceholder.typicode.com/posts')
            .map(res => res.json());
    }}

vehicle.component.ts

import { Component } from '@angular/core';

import { VehicleService } from './vehicle.service';

@Component({
    moduleId: module.id,
    selector: 'vehicle-json',
    templateUrl: 'vehicle.html',
    providers: [ VehicleService ]
})
export class VehicleComponent  { 
  vehicle: Vehicle[];

  constructor(private vehicleService: VehicleService){
    this.vehicleService.getVehicle().subscribe(vehicle => {
        /*console.log(vehicle);*/this.vehicle = vehicle;
    });
  }
}

interface Vehicle {
  id: number;
  title: string;
  body: string;
}

vehicle.html

<div *ngFor="let vehicle of vehicles">
    <h3>{{vehicle.title}}</h3>
    <p>{{vehicle.body}}</p>
</div>
test 1-2-3

The output is: "test 1-2-3". I checked if the jsons will be displayed inside the console using: console.log(vehicle); - it worked, it returns Array of Objects.

What am I doing wrong? Any ideas how to fix my code?

Upvotes: 1

Views: 199

Answers (1)

AVJT82
AVJT82

Reputation: 73357

You have an error:

this.vehicleService.getVehicle().subscribe(vehicle => {
        this.vehicle = vehicle;
})

but in your html you refer to let vechicle of vehicles

You should add an "s" to your this.vehicle to your subscription like so:

this.vehicleService.getVehicle().subscribe(vehicle => {
        this.vehicles = vehicle;
})

Edit: Just forgot to meantion to change the local variable vehicle: Vehicle[] to vechicles: Vehicle, but that you figured out that yourself! ;)

Upvotes: 2

Related Questions