Импорт файла JSON, приводящий к ошибке синтаксического анализа для HttpClient - PullRequest
Новая
       11

Импорт файла JSON, приводящий к ошибке синтаксического анализа для HttpClient

0 голосов
/ 27 апреля 2018

Я новичок в изучении 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-файле у меня есть следующий запрос из папки assets- 

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 для своей учебной платформы вместе с видеорядом от Линды. Кажется, что обоим не хватает информации об ошибках. Я попробовал Git, но то, на что я смотрю как на решения, не совсем имеет для меня смысл. Я надеюсь извлечь уроки из этой ошибки и буду признателен за любые рекомендации сообщества. Спасибо всем, кто откликнется заранее!

1 Ответ

0 голосов
/ 27 апреля 2018

Из ошибки похоже, что ваш model.json не является допустимым JSON. Попробуйте поставить двойные кавычки вокруг всех ваших ключей. 

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