Display Json Array Angular 5 HttpClient

Question

I'm a beginner in Angular5 and I need your help...

I made an API in my backend (Java/Spring Boot) which I can access with http://localhost:8080/applications

With this API I want to retrieve a chunk of data (it's a JSON Array).

I try to retrieve data with httpClient on my Angular but I have this result in my frontend : [object Object]

This my app.component.ts


    import {Component, Injectable} from '@angular/core';
    import {HttpClient, HttpErrorResponse} from "@angular/common/http";
    import {Observable} from "rxjs/Observable";
    import 'rxjs/add/operator/map';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
      url = 'http://localhost:8080/applications';
      res = [];

      constructor(private http: HttpClient) {
      }


      ngOnInit(): void {

        this.http.get(this.url).subscribe(data => {
            this.res = data;
            console.log(data);
        },
          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log("Client-side error occured.");
            } else {
              console.log("Server-side error occured.");
            }
          });

      }

    }

My Application interface Application.ts


    interface Applications {

      id : number;
      type : string;
      port : string;
      baseUrl : string;
      architecture : string;
      protocol : string;
      serveur : string;

    }

How can I display my data ?

Thanks in advance

Sinan Sinan · Accepted Answer · 2017-12-21T04:15:32

Close enough, try this:
in your app.component.ts you can just use the constructor with dependency injection, no need of ngOnInit(). One more thing, I'm not sure about your API Route. You should have something like http://localhost:8080/[controller]/[action]
http://localhost:8080/application/getall
http://localhost:8080/api/application/getall --> this one is used for this example.

import { Component, Inject } from '@angular/core';
import { Http  from '@angular/http';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] })

export class AppComponent {
private url: 'http://localhost:8080/api/application/getall'
public apps: Applications[];

constructor(http: Http) {
    http.get(url).subscribe(result => {
        this.apps = result.json() as Applications[];
    }, error => console.error(error));
}}

interface Applications {
   id: number;
   type: string;
   port: string;
   baseUrl: string;
   architecture: string;
   protocol: string;
   serveur: string; }

in your app.component.html let try with an unordered list

<ul *ngIf="apps">
   <li *ngFor="let app of apps">
      {{app.Id}}
   </li>
</ul>

Put <app-root></app-root> where you want in your html to make the call.

One more step, in your app.shared.module.ts you have to import your
component import { AppComponent } from './components/app/app.component'; and add your component to @NgModule declarations[]

@NgModule({
  declarations: [
   //...
   AppComponent
  ]
  //...

I hope this works

Display Json Array Angular 5 HttpClient

3 Answers