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

Solution 1

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

Solution 2

Hi #yupii7 thanks a lot to answer me. I try your code but it doesn't work in Angular5. But, when I simply use :

    public apps: Applications[];

    this.http.get(this.url).subscribe(result => {
            this.apps = result as Applications[];
        }

It works perfectly :)

Now, I need to find a way to push these data on a table. If you have an idea I will be happy to hear it. :)

See here ! To add a comment on yours I need 50 reputation, so I leave my comment here to make you see it. You need to ask a new question. See angular material or make your own table