0

I tried to make a practice task-app and basically I have to get all the task data from a json server. I'd like to display it in the browser console first but the data won't show up and it shows an error. I followed all the steps from the tutorial video I've watched but still I'm getting the error. console error

This is my service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class RestapiService {
  constructor(private http: HttpClient) {}

  getTasks() {
    return this.http.get('http://localhost:3000/tasks');
  }
}

My taskdisplay.component.ts

import { Component, OnInit } from '@angular/core';
import { RestapiService } from 'src/app/services/restapi.service';

@Component({
  selector: 'app-taskdisplay',
  templateUrl: './taskdisplay.component.html',
  styleUrls: ['./taskdisplay.component.css'],
})
export class TaskdisplayComponent implements OnInit {
  constructor(private service: RestapiService) {}

  ngOnInit(): void {
    this.getallTasks();
  }

  userTasks: any = [];

  getallTasks() {
    this.service.getTasks().subscribe((result) => {
      this.userTasks = result;
      console.log(this.userTasks);
    });
  }
}
John Ramirez
  • 1
  • 1
  • Posting an image is encouraged if it helps understanding the issue better. But please don´t post code or error messages as images only. [Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551). [edit] your question and add that information. – burnsi Feb 18 '23 at 14:55
  • What does the response show? A console error isn't helpful in this case. – Get Off My Lawn Feb 18 '23 at 15:31

1 Answers1

0

Your setting of the server url should not be done in the request. In the error message you see the url getting parsed in a weird way. Instead make the call as such http.get('tasks') and otherwise, follow the answer as described in this post: How do I set the baseUrl for Angular HttpClient?

Loop
  • 480
  • 2
  • 9