Angulaire : ERREUR SyntaxError: Unexpected token < en JSON à la position 0
Salut j'ai besoin d'aide j'ai créé un angulaire de service, mais lorsque je veux afficher les données de mon fichier json, il m'indique cette erreur, j'ai essayé beaucoup d'échec de la solution
app.composante.ts
import {Component, OnInit} from '@angular/core';
import {Car} from './domain/car';
import {CarService} from './service/carservice';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CarService]
})
export class AppComponent implements OnInit {
cars1: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().subscribe(cars => this.cars1 = cars);
}
}
carservice.ts
@Injectable()
export class CarService {
private jsonUrl = './cars-smalll.json';
constructor(private http: Http) {}
getCarsSmall(): Observable<Car[]> {
return this.http.get(this.jsonUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
//In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
voitures-étroit.json
[
{
"brand": "VW",
"year": 2012,
"color": "Orange",
"vin": "dsad231ff"
},
{
"brand": "Audi",
"year": 2011,
"color": "Black",
"vin": "gwregre345"
},
{
"brand": "Renault",
"year": 2005,
"color": "Gray",
"vin": "h354htr"
}
]
vous en remercie d'avance.
- Cette erreur est presque toujours causée par un problème de configuration du serveur, et non pas par angulaire à tous. Le serveur est l'envoi d'un document HTML à la place de l'un de vos fichiers javascript. Ce serveur, utilisez-vous ici, et qu'est-ce que votre serveur de configuration de routage ressembler?
- ou pour se moquer de JSON chemin d'accès est incorrect, ce que vous voyez dans le navigateur du journal de Réseau?
- Grâce Claies pour votre réponse, donc dans mon cas je veux utiliser un fichier json qui stockent dans la même structure (src / app / data / voitures-étroit.json)
- Ajouter un fichier Json en vertu de l'actif et ensuite l'exécuter
- j'ai essayer de mettre de json dans le dossier des ressources, et j'ai changer de chemin de json pour (/src/app/assets/voitures-étroit.json) mais j'obtiens le même message d'erreur
- Je suis désolé, je ne suis pas sûr de savoir comment beaucoup plus d'aide que je peux être. Essayez de poster sur Angulaire 2+ à reddit. Il y a vraiment des gens utiles là-bas.
Vous devez vous connecter pour publier un commentaire.
En plus, en utilisant le chemin d'accès correct suggéré dans les commentaires, votre problème est que vous essayez d'extraire des données à partir de quelque chose qui n'existe pas. Jetez un oeil à votre json, c'est un tableau. Mais dans votre
extractData
-fonction que vous essayez d'extraire des données à partir d'un objetdata
, ce qui n'est évidemment pas présent dans votre JSON. Donc, changement de fonction pour:Cela devrait le faire, ainsi que de corriger le chemin d'accès du fichier JSON.