I have recently started learning IONIC/Angular and Javascript, although I do have some background in other programming languages. The issue I'm currently facing is related to fetching JSON data from an external API (I've created the API with Strapi) and successfully receiving responses, but struggling to display them on Views
Below is the code snippet: enter image description here vowels.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
// Custom enum for search types (optional)
export enum SearchType {
all = '',
vowels = 'vowel',
easy = 'easy',
hard = 'hard',
naglos = 'naglos',
wyglos = 'wyglos',
srodglos = 'srodglos'
}
// Custom enum for categories (optional)
export enum Categories {
all = '',
naglos = 'naglos',
wyglos = 'wyglos',
srodglos = 'srodglos'
}
@Injectable({
providedIn: 'root'
})
export class VowelService {
url = 'http://localhost:1337/vowels';
constructor(private http: HttpClient) { }
searchData(title: string): Observable<any> {
return this.http.get(`${this.url}?name=${encodeURI(title)}`).pipe(
map(results => results['Search'])
);
}
searchVowel(type: Categories): Observable<any> {
return this.http.get(`${this.url}?&categories.name=${type}`).pipe(
map(results => results['Search'])
);
}
getDetails(id) {
return this.http.get(`${this.url}?i=${id}&plot=full`);
}
}
vowels.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-title>Vowel Searcher</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)"></ion-searchbar>
<ion-item>
<ion-label>Select Type</ion-label>
<ion-select [(ngModel)]="type" (ionChange)="searchChangedVowels($event)">
<ion-select-option value="">All</ion-select-option>
<ion-select-option value="naglos">Naglos</ion-select-option>
<ion-select-option value="srodglos">Srodglos</ion-select-option>
<ion-select-option value="wyglos">Wyglos</ion-select-option>
</ion-select>
</ion-item>
<ion-list>
<ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'vowels', item.id]">
<ion-label text-wrap>
<h3>{{ item.id }}</h3>
<h3>{{ item.name }}</h3>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
vowels.page.ts
import { VowelService, Categories } from './../../services/vowels.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-vowels',
templateUrl: './vowels.page.html',
styleUrls: ['./vowels.page.scss'],
})
export class VowelsPage implements OnInit {
results: Observable<any>;
searchTerm: string = '';
type: Categories = Categories.all;
constructor(private vowelService: VowelService) { }
ngOnInit() { }
searchChanged() {
this.results = this.vowelService.searchData(this.searchTerm);
}
searchChangedVowels() {
this.results = this.vowelService.searchVowel(this.type);
}
}