Getting data from localhost using Angular and Spring Boot

Question

I'm working on build an web app using Angular and Spring Boot. I am trying to get data from localhost but I get nothing.

This is the json data from the server

And this my service ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {map, catchError} from "rxjs/operators";
import { Observable, throwError } from 'rxjs';
import {Entreprise} from '../modules/entreprise';

@Injectable({
  providedIn: 'root'
})
export class EntrepriseService {

  constructor(private http:HttpClient) {  }


  public getEntreprises():Observable<Entreprise>{

    return this.http.get<Entreprise>("http://localhost:8080/entreprises/all");

            }

}

And this is component ts:

import { Component, OnInit } from '@angular/core';
import { EntrepriseService } from '../services/entreprise.service';
import {Entreprise} from '../modules/entreprise';


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


export class LoginComponent implements OnInit {

entreprises:Entreprise;


  constructor(private entrepriseService:EntrepriseService) { }

  public onGetEntreprises(){

    return this.entrepriseService.getEntreprises().
   subscribe(data =>{
      this.entreprises = data;

      console.log(data);
    });

  }

  ngOnInit(): void {



  }

}

And this is the html template

<h4>entreprises</h4>
<button (click)="onGetEntreprises()">get </button>

<p *ngFor="let ee of entreprises">{{ee.content.name}}</p>

And this is the error I get when I click on the button

What have to you tried to debug this issue. I don't see any issue. But for the sake of debugging use a plain JavaScript file and use a fetch request like this: fetch("localhost:8080/entreprises/all") .then((response) => response.json()) .then((data) => console.log(data)) — Immad Hamid
– Immad Hamid, Commented Apr 10, 2020 at 20:12

aslary · Accepted Answer · 2020-04-10 20:46:35Z

1

First of, you should add an *ngIf to your p tag, since you could get null errors if the array of Enterprise is not initialized (it is async => API call).

Also, this is the actual problem, you defined a single model class reference, but not an array, which is actually what gets returned by your backend.

Probably, it would be better practice if you did this:

this.enterprise = data.content

While this.enterprises looks somewhat like this:

enterprises: Enterprise[];

Furthermore, you probably have not implemented a CORS policy on the Spring side of things. Here is a good article about that: CORS with Spring. For testing purposes, add @CrossOrigin(origins = "*") to your @RestController class. This is good for development, but in production you should defo don't do this, since this would allow all origins to request your API.

More tips:

Be sure that your model classes on the Angular side of things do actually have all fields which come from the backend.
Are you sure that you have imported the HttpClientModule?

Update your question to tell me if it works.

edited Apr 10, 2020 at 20:46

answered Apr 10, 2020 at 20:39

aslary

4312 silver badges12 bronze badges

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

1 Comment

hamza mon Over a year ago

thanks it works .. i added @CrossOrigin(origins = "*") to my server and it worked

Collectives™ on Stack Overflow

Getting data from localhost using Angular and Spring Boot

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related