导入 json 文件导致 HttpClient 解析错误

Question

我是新手 Angular，似乎导入外部数组的简单解决方案导致了一个我不明白的错误。我用过 AngularJS 并且没有遇到任何这些问题。以下是我收到的错误

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/assets/models.json", ok: false, …}
error
:
{error: SyntaxError: Unexpected token l in JSON at position 10 at JSON.parse (<anonymous>) at XMLHtt…, text: "[↵  {↵    label: "Metal Man",↵    sample: "/assets…es",↵    textures: "6",↵    materials: "1"↵  }↵]↵"}
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost:4200/assets/models.json"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost:4200/assets/models.json"
__proto__
:
HttpResponseBase

在我的 ts 文件中，我从资产文件夹发出了以下请求-

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-work',
  templateUrl: './work.component.html',
  styleUrls: ['./work.component.css']
})
export class WorkComponent implements OnInit {

  viewMode = 'work';
  modelwork: any;


 constructor( private http: HttpClient, public sanitizer: DomSanitizer ) {
 this.sanitizer = sanitizer;
}

ngOnInit(): void {
this.http.get<any>('./assets/models.json').subscribe(
  data => {
    this.modelwork = data;
  })

$(document).ready(function() {
  $(".tag").hide();
  $(".grid-item").hover(function() {
    $(this).children(".tag").stop(true, true).slideToggle(500);
     return false;
  })
});

}
}

我非常想了解是什么原因导致了这个问题，如何解决它，如果有任何好的文档就太好了。我在我的学习平台上使用了一本名为 ngBook 的书以及 Lynda 的视频系列。两者似乎都缺少很多关于错误问题的信息。我试过 Git，但我认为解决方案对我来说意义不大。我希望从这个错误中吸取教训，并感谢社区提供的任何指导。感谢所有提前回复的人！

Answer 1

从错误看来，您的 model.json 无效 JSON。尝试在所有键周围加上双引号。

[
  {
    "label": "Metal Man",
    "sample": "/assets…es",
    "textures": "6",
    "materials": "1"
  }
]

导入 json 文件导致 HttpClient 解析错误

Importing json file resulting in a parsing Error for HttpClient

json

compiler-errors

http-error

angular