How to display JSON objects in Angular2 views

Question

New to Angular and I have the JSON available to me in the console. So the backend/REST call is functioning correctly. However I'm struggling to understand how to show the JSON in the view for the component.

Console screenshot:

screenshot

app.component.ts

import { Component } from 'angular2/core';
import { TradeshowComponent } from './tradeshow/tradeshow.component';


@Component({
    selector: 'app-container'
})

export class AppComponent {

    constructor() { }
}

tradeshow.component.ts

import { Component, View } from 'angular2/core';
import { CORE_DIRECTIVES, NgIf, NgFor } from 'angular2/common';
import { DataService } from '../shared/services/data.service';
import { DashboardLayoutComponent } from '../dashboard_layout/dashboard_layout.component';
import { HTTP_PROVIDERS } from 'angular2/http';


@Component({
  selector: 'tradeshow',
  providers: [DataService, HTTP_PROVIDERS]
})

@View({
  templateUrl: 'src/app/tradeshow/tradeshow.component.html',
  directives: [DashboardLayoutComponent, NgIf, NgFor]
})

export class TradeshowComponent {

    constructor(private _dataService: DataService) { this.getTradeShows() }


  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.tradeShows = tradeshows
            error =>  console.error('Error: ' + err)
         );
     }
}

And the HTML I'm using is:

tradeshow.component.html

<div *ngFor="#tradeshows of tradeshows">{{ tradeshows.name }}</div>

And my service looks like this:

data.service.ts

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Config} from '../../config/config';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
 export class DataService {

    // API path
    baseUrl: string = '/api';
    authUrl: string;
    apiUrl: string;
    registerUrl: string;

    constructor(private _http: Http, private _config: Config) {
         this.apiUrl = this._config.get('apiUrl') + this.baseUrl;
         this.authUrl = this._config.get('apiUrl') + '/auth';
         this.registerUrl = this._config.get('apiUrl') + '/register';
     }

    getTradeShows() {
        return this._http.get(this.getApiUrl('/tradeshow/list'))
            .map((res: Response) => res.json())
           .catch(this.handleError);
     }
 }

Günter Zöchbauer · Accepted Answer · 2016-05-04 07:22:26Z

1

This looks like a bug

  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.getTradeShows() = tradeshows,
            error =>  console.error('Error: ' + err)
        );
  }

it should be

  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.tradeshows = tradeshows
            error =>  console.error('Error: ' + err)
        );
  }

You can remove NgIf, NgFor from

  directives: [DashboardLayoutComponent, NgIf, NgFor]

these are now globally available.

Change

 <div *ngFor="#tradeshows of tradeshows">{{ tradeshows.name }}</div>

to

 <div *ngFor="#tradeshow of tradeshows">{{ tradeshow.name }}</div>

@Child() was removed a while ago

})

@View({

should be replaced by ,

I made an error in this line

tradeshows => this.tradeShows = tradeshows

should be (lowercase S)

tradeshows => this.tradeshows = tradeshows

Plunker example

edited May 4, 2016 at 7:22

answered May 3, 2016 at 18:47

Günter Zöchbauer

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

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

11 Comments

s0rfi949 Over a year ago

Thanks. Fixed this and updated the code above. I'm not seeing any console errors on the tradeshow.component.html although no result is showing on the front end for {{ tradeshows.name }}. Area is blank and in devtools shows 

Günter Zöchbauer Over a year ago

I update my answer. Do you need more information? Do you get any error message? What is not working as expected?

s0rfi949 Over a year ago

Thanks again, removed NgIf, NgFor and updated. However DevTools still only showing  in that area. Only console error I see is undefined:1 Uncaught (in promise) TypeError: object is not a constructor(…)

Günter Zöchbauer Over a year ago

Seems you are not calling getTradeShows() anywhete. Add this.getTradeShows() at the end of the constructor of your component.

Günter Zöchbauer Over a year ago

I updated my answer again. Please tell if these suggestions result in different errors.

|

Collectives™ on Stack Overflow

How to display JSON objects in Angular2 views

Console screenshot:

app.component.ts

tradeshow.component.ts

tradeshow.component.html

data.service.ts

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Console screenshot:

app.component.ts

tradeshow.component.ts

tradeshow.component.html

data.service.ts

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related