Angular：错误SyntaxError：在JSON位置0处出现意外的令牌<

Question

你好，我需要帮助。我创建了一个Angular服务，但是当我想查看我的json文件中的数据时，它显示出这个错误。我尝试了许多不成功的解决方案。

app.component.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);
    }
}

cars-smalll.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"
    }
]

thank you in advance.

- Anas

---

这个错误几乎总是由服务器配置问题引起的，而不是Angular本身引起的。服务器发送的是HTML文档，而不是你的JavaScript文件之一。你在使用什么服务器？你的服务器路由配置是什么样子的？ - Claies

或者模拟的 JSON 路径不正确，您在浏览器的网络日志中看到了什么？ - Aman

谢谢Claies的回复，那么在我的情况下，我想使用一个json文件，它以相同的结构存储（src / app / data / cars-smalll.json）。 - Anas

将Json文件添加到assets文件夹下，然后运行。 - Parth Ghiya

我试图将JSON放入资产文件夹中，并将JSON路径更改为（/src/app/assets/cars-smalll.json），但我仍然遇到相同的错误。 - Anas

很抱歉，我不确定我还能提供多少帮助。尝试在 Reddit 的 Angular 2+ 上发布问题。那里有一些非常乐于助人的人。 - Wallace

Answer 1

除了使用评论中建议的正确路径之外，您的问题是您试图从不存在的内容中提取数据。看一下你的json，它是一个数组。但在你的extractData函数中，你试图从一个名为data的对象中提取数据，当然，在你的JSON中没有这个对象。所以将该函数更改为：

private extractData(res: Response) {
  let body = res.json();
  // return just the response, or an empty array if there's no data
  return body || []; 
}

这应该可以解决问题，并纠正JSON文件的路径。

- AT82

---

非常感谢，你帮了我，我没有注意到。一个备注是，在我的情况下，json路径如下（../../assets/data/cars-small.json），这对我很有效。 - Anas

很高兴听到它有所帮助！祝你有美好的一天，编程愉快！ :) - AT82