0

its literally my third day trying to do that.thats what i achieved ,it displays nothing ,what i really want to do is to fetch data from lacal json so that every json element will be displayed in a html block

Service.ts

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

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

  constructor(private http: HttpClient) {
    this.getJSON().subscribe(matches => console.log(matches))};
        public getJSON(): Observable<any> {
      return this.http.get("./matches.json");
  }
  }

component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

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

  constructor(private ApiService : ApiService) { }

  ngOnInit(): void {

    this.ApiService.getJSON().subscribe(data => {
      console.log(data);
    });
  }

}

matches.json

[{"id":"1","homeTeam":"Es Tunis","awayTeam":"Tatawin","dateM":"2022-04-21","stade":"Rades","NBtickets":"20000"},
{"id":"2","homeTeam":"Rejiche","awayTeam":"Etoile du sahel","dateM":"2022-04-11","stade":"Mahdia","NBtickets":"15000"},
{"id":"3","homeTeam":"Cs Cheba","awayTeam":"Solimane","dateM":"2022-04-11","stade":"Cheba","NBtickets":"5000"},
{"id":"4","homeTeam":"Zarzis","awayTeam":"Club Africain","dateM":"2022-04-11","stade":"Jlidi","NBtickets":"10000"},
{"id":"5","homeTeam":"Olympique Beja","awayTeam":"Monastir","dateM":"2022-04-11","stade":"Boujemaa Kmiti","NBtickets":"15500"},
{"id":"6","homeTeam":"Ca Bizert","awayTeam":"Cs Sfaxien","dateM":"2022-04-11","stade":"Tayeb mhiri","NBtickets":"10000"},
{"id":"7","homeTeam":"Hammam-sousse","awayTeam":"Ben Gerdane","dateM":"2022-04-11","stade":"Bouaali hwar","NBtickets":"12000"},
{"id":"8","homeTeam":"hammam-Lif","awayTeam":"Metlaoui","dateM":"2022-04-11","stade":"Stade municipale","NBtickets":"10000"}]

why wont my code display anything? ps:i tried many things such as importing file.json but nothing worked(im beginner)

jack
  • 7
  • 3
  • You are writing your service file in totally wrong way. Wait let me fix it for you. Provide me your html template too. – debugger Apr 18 '22 at 15:41
  • first thanks ,but all the html related to this problem now is a void component with in app.component.html because i still dont know what kind of html i'll write – jack Apr 18 '22 at 15:50
  • You are messing up with things. You don't need to create a service file just for rendering staic data. Along with service you need to have an model.ts file as well which I haven't seen anywhere. The matches.json is a static string. I will show you how to render your static data in html template. And rest for services and all you have to learn it properly. – debugger Apr 18 '22 at 15:51
  • Give me your html template. – debugger Apr 18 '22 at 15:55
  • what should i do bro – jack Apr 18 '22 at 15:56
  • You should learn it from very basic. Just copying code is not going to work here. You can't have a solution until you learn it. – debugger Apr 18 '22 at 15:58
  • i really know that but i have a school project and the teacher gave us two weeks to end a whole angular project with php backend,i tried but i think its time for sleep – jack Apr 18 '22 at 16:03
  • have a look at [this](https://stackblitz.com/edit/angular-ivy-qekk7b?file=src%2Fapp%2Fapp.component.html). aren't you trying to make something like this? – debugger Apr 18 '22 at 16:03
  • yes according to the html but i cant do that with json data because i made it with php with backend informations – jack Apr 18 '22 at 16:08
  • You are messing up with services. In service you should like something write this : `constructor(private http: HttpClient) { } getJson(){ this.http.get() .subscribe()}` – debugger Apr 18 '22 at 16:10
  • You shouldn't write responses inside the `{}` after constructor. – debugger Apr 18 '22 at 16:12
  • https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file – jack Apr 18 '22 at 16:17
  • it was an answer to this question – jack Apr 18 '22 at 16:18
  • That is something new I didn't know. Try to follow the codes from there. And search for errors here. – debugger Apr 18 '22 at 16:21

0 Answers0