Angular HttpErrorResponse GET Request

Published

I have a simple Quarkus project and want to show the data in an Angular table with HttpClient. I also have a CORS Filter. Anyway, I get the following error:
Angular table with no date, HttpErrorResponse Status 0

service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { School } from './model/school';

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

  url = "localhost:8080/school"

  constructor(public http: HttpClient) { }

  getAll(): Observable<School[]> {
    return this.http.get<School[]>(this.url);
  }

  getById(id: number): Observable<School> {
    const url = "locahlost:8080/school/{id}";
    return this.http.get<School>(url);
  }

}

ts of component

import { Component, OnInit } from '@angular/core';
import { School } from '../model/school';
import { SchoolService } from '../school.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  schools: School[] = [];
  
  constructor(public schoolService: SchoolService) { }

  ngOnInit(): void {
    this.schoolService.getAll().subscribe(e => {
      this.schools = e;
    });
  }

}

html

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Street</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let school of schools">
            <td>{{school.id}}</td>
            <td>{{school.name}}</td>
            <td>{{school.street}}</td>
        </tr>
    </tbody>
</table>

server model

package model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class School {

    @Id
    @GeneratedValue
    private int id;
    private String name;
    private String street;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }
}

resource

package rest;

import model.School;

import javax.inject.Inject;
import javax.transaction.Transactional;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import java.util.List;

@Path("school")
@Produces(MediaType.APPLICATION_JSON)
@Transactional
public class SchoolResource {

    @Inject
    SchoolDao dao;

    @GET
    public List<School> getAll() {
        return dao.getAll();
    }

    @Path("id")
    @GET
    public School getById(@PathParam("id") int id) {
        return dao.getById(id);
    }

}

dao

package rest;

import model.School;

import javax.enterprise.context.Dependent;
import javax.inject.Inject;
import javax.persistence.EntityManager;
import java.util.List;

@Dependent
public class SchoolDao {

    @Inject
    EntityManager em;

    public List<School> getAll() {
        return em.createQuery("select s from School s", School.class).getResultList();
    }

    public School getById(int id) {
        return em.find(School.class, id);
    }

}

Thank you in advance, I think the problem must be on the server, because I tried showing data with a JSON file instead of Quarkus data already, and it does work.

(This text is just because of the minimum length, ignore)

Source: Angular Questions

Published
Categorized as angular, httpclient, java, rest, typescript Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq