Display Data from Backend in Ionic - php

Question

I have a user.service, a list.page.ts and a list.page.html.
And I want to display data from the backend (php). I am getting Data in the console log, but it doesn't display on the website. Please Help.
Thank you!
user.servive
export enum SearchType {
all = '',
name = 'name',
stadt = 'stadt'
}
#Injectable({
providedIn: 'root'
})
export class UserService {
url = 'http://127.0.0.1:8000/getallrestaurants';
constructor(public http: HttpClient) { }
searchData(name: string, type: SearchType): Observable<any> {
return this.http.get('http://127.0.0.1:8000/getallrestaurants')
.pipe(
map(results => {
console.log('RAW: ', results);
return results['Search'];
})
);
}
list.page.ts
export class ListPage implements OnInit {
results: Observable<any>;
searchTerm = '';
type: SearchType = SearchType.all;
constructor(private userService: UserService) { }
ngOnInit() {}
searchChanged() {
this.results = this.userService.searchData(this.searchTerm, this.type);
}
list.page.html
<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)"></ion-searchbar>
<ion-item>
<ion-label>Select Searchtype</ion-label>
<ion-select [(ngModel)]="type" (ionChange)="searchChanged($event)">
<ion-select-option value="">All</ion-select-option>
<ion-select-option value="stadt">Stadt</ion-select-option>
<ion-select-option value="name">Name</ion-select-option>
</ion-select>
</ion-item>
<ion-list>
<ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'list', item.imdbID ]">
<ion-icon [name]="item.icon" slot="start"></ion-icon>
<p>Hallo User: {{item.name}}</p>
</ion-item>
This is my console.log, as you see i get the data, now i want it to show for example the name on frontend.

Answer 1

Ok I see the problem here in the class user.service you have to change it like this.
searchData(name: string, type: SearchType): Observable<any> {
return this.http.get('http://127.0.0.1:8000/getallrestaurants')
.pipe(
map(results => {
console.log('RAW: ', results);
return results;
})
);
}
You have to remove the ['Search'] because your JSON Response has no entry which is like 'Search'.

Answer 2

If you're seeing console.log update then this is most likely an issue with the html template not knowing some data changed that it needs to re-render and update the view for. Angular has built in change detection strategy but as the developer you can also manually interact with it. Checkout (https://angular.io/api/core/ChangeDetectorRef) for further explanation on this topic.
As for your code, try inserting the change detection reference as so by importing ChangeDetectorRef from #angular/core, and then check for changes of data to tell the view to re-render.
list.page.ts
export class ListPage implements OnInit {
results: Observable<any>;
searchTerm = '';
type: SearchType = SearchType.all;
constructor(private userService: UserService, private ref: ChangeDetectorRef) { }
ngOnInit() {}
searchChanged() {
this.results = this.userService.searchData(this.searchTerm, this.type);
this.ref.detectChanges()
}
Note: this will execute every time the user types and it may slow down your application because you're forcing angular to check for changes every time you call searchChanged(). I would thereby implement some sort of debounce technique to stall redundant or unnecessary calls to searchChanged(). Check out this resources to learn more about debouncing if this issue comes up (https://rxjs-dev.firebaseapp.com/api/operators/debounce).