Hello community,
I’m trying to make a http get request and everything is working in the browser and i get the correct json in postman too(so no problems with the API), but i get a weird error when i run the app in android device (see screenshot).
error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad
ionic info
Ionic:
ionic (Ionic CLI) : 4.1.2 (/home/codr/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.11
@angular-devkit/core : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/ng-toolkit : 1.0.8
@ionic/schematics-angular : 1.0.6
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)
System:
Android SDK Tools : 26.1.1 (/home/codr/Android/Sdk)
NodeJS : v8.11.3 (/home/codr/.nvm/versions/node/v8.11.3/bin/node)
npm : 6.4.1
OS : Linux 4.15
I tried the same code in ionic-v3 and i have the same error
ionic v3 info
Ionic:
ionic (Ionic CLI) : 4.1.2 (/home/codr/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)
System:
Android SDK Tools : 26.1.1 (/home/codr/Android/Sdk)
NodeJS : v8.11.3 (/home/codr/.nvm/versions/node/v8.11.3/bin/node)
npm : 6.4.1
OS : Linux 4.15
My code:
click to expand
car-list.page.ts
import {Component, OnInit} from '@angular/core';
import {CarModel} from './car-model/car.model';
import {CarListService} from './car-list.service';
@Component({
selector: 'app-car-list',
templateUrl: './car-list.page.html',
styleUrls: ['./car-list.page.scss'],
})
export class CarListPage implements OnInit {
cars: CarModel[];
constructor(private carListService: CarListService) {
}
ngOnInit() {
this.onChooseCar();
}
onChooseCar() {
this.carListService.getCars().subscribe(
(cars: CarModel[]) => {
this.cars = cars;
}
);
}
}
car-list.service.ts
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {CarModel} from './car-model/car.model';
import {Observable} from 'rxjs/internal/Observable';
@Injectable({ providedIn: 'root' })
export class CarListService {
private apiUrl = 'http://localhost:8080/api/cars';
constructor(private http: HttpClient) {
}
getCars(): Observable<CarModel[]> {
return this.http.get<CarModel[]>(this.apiUrl);
}
}
car.model.ts
export class CarModel {
id: number;
model: string;
doorNumber: number;
transmission: string;
numberPlate: string;
available: boolean;
pricePerHour: number;
imageUrl: string;
fuelType: string;
seats: number;
}
car-list.page.html
<ion-header>
<ion-toolbar>
<ion-title>car-list</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="cards-bg">
<ion-list>
<ion-item *ngFor="let car of cars">
<ion-card>
<img [src]="car.imageUrl"/>
<ion-card-content>
<ion-card-title>
{{car.model}}
</ion-card-title>
<ion-row>
<ion-col size="6">
<ion-row nowrap justify-content-start>
<ion-icon src="assets/icon/gas-station.svg" padding-end="0.5px"></ion-icon>
{{car.fuelType}}
</ion-row>
</ion-col>
<ion-col size="6">
<ion-row nowrap justify-content-start>
<ion-icon src="assets/icon/car-door.svg" padding-end="0.5px"></ion-icon>
{{car.doorNumber}}
</ion-row>
</ion-col>
<ion-col size="6">
<ion-row nowrap justify-content-start>
<ion-icon src="assets/icon/gearbox.svg" padding-end="0.5px"></ion-icon>
{{car.transmission}}
</ion-row>
</ion-col>
<ion-col size="6">
<ion-row nowrap justify-content-start>
<ion-icon src="assets/icon/seat.svg" padding-end="0.5px"></ion-icon>
{{car.seats}}
</ion-row>
</ion-col>
</ion-row>
<ion-button expand="full" routerLink="/qr-generator" class="ion-color-success">Rent for {{car.pricePerHour}}$/hour</ion-button>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-content>
Any sugestions?
