How can i show json http details page in ionic5

Ionic Framework Ionic Angular
1

Please I have problem when i print data in details page My code I Dont Want Use Services

    **Schools Page**   

 items: Observable<any>;
constructor(private router: Router, private http: HttpClient) {}
ngOnInit() {
this.items = this.http.get('assets/data/schools.json');
this.items.subscribe(data => {
});
}

onselect(item){
this.router.navigate(['/education/schools', item.id])
}

 <ion-content>
  <ion-list >
  <ion-item button detail lines="inset" *ngFor="let item of (items | async)?.schools" 
   (click)="onselect(item)" >
  {{ item.name }}
  </ion-item>
   </ion-list>
  </ion-content>


  **Details Page**

   public itemId;
  constructor(private route: ActivatedRoute, private router : Router) {}

  ngOnInit(){
   this.route.paramMap.subscribe((params: ParamMap) =>{
   let id = parseInt(params.get('id'));
   this.itemId = id;
  });
  }

  <ion-card >
  <ion-card-content>
   My Name {{item.name}}
  </ion-card-content>
  </ion-card>

i want to show {{item.name}} and others

2

Why do you say this?

There’s a reason that we don’t write programs in one giant file. It’s impossible to find things. Separating code into “stuff that deals with presentation” and “stuff that deals with business objects” makes for a much more readable code base.

I would go so far as to say that you should never inject HttpClient into anything but a service.

So what I do here is to work backwards. Decide what shape a service would have in order to provide a page with exactly what it wants. In your situation, it seems that would be “I want to exchange an integer ID (I would also recommend making the ID a string instead of a number, because it eliminates one more set of things to worry about (what if I get something that isn’t a number?)) for a School”.

interface School {
  id: number;
  name: string;
  ...
}

class SchoolDetailsPage {
  school: School = {id: 0, name: "loading..."};

  constructor(private schooler: SchoolService) {
  }
 
  ngOnInit() {
    id = ...;
    this.schooler.schoolById(id).subscribe(school => this.school = school);
  }
}

class SchoolService {
  constructor(private http: HttpClient) {
  }

  schoolById(id: number): Observable<School> {
    return this.http.get<School>(...);
  }
}