Как получить доступ к локальному файлу JSON с помощью запроса HTTP GET в Angular 4? - PullRequest
Новая
       24

Как получить доступ к локальному файлу JSON с помощью запроса HTTP GET в Angular 4?

0 голосов
/ 25 января 2019

У меня есть локальный файл JSON, к которому я пытаюсь получить доступ через HTTP-запрос GET.Я положил его в my-project/src/app/assets/accounts.json и проверил, что JSON исправен.

Я выполняю запрос от службы, которая вызывается ngOnInit() - я также попытался без второго параметра в get 

  public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"})
    .subscribe((data) => console.log(data));
  }

К сожалению, все, что я получаю в своем console.log, это сообщение об ошибке 

    HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://users.local/assets/accounts.json", ok: false, …}
    error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "<!DOCTYPE html>↵<html>↵    <head>↵        <title>U…<script src="dist/js/users.js"></script>↵</html>↵"}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure during parsing for http://users.local/assets/accounts.json"
    name: "HttpErrorResponse"
    ok: false
    status: 200
    statusText: "OK"
    url: "http://users.local/assets/accounts.json"

Если я раскрою, то я вижу HTML-код index.html: 

<!DOCTYPE html>
<html>
    <head>
        <title>Users</title>
        <base href="/" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="dist/css/vendor.css">
        <link rel="stylesheet" href="dist/css/users.css">
    </head>
    <body>
        <mv-users id="app-users">
            Loading...
        </mv-users>
    </body>
    <script src="dist/js/vendor.js"></script>
    <script src="dist/js/users.js"></script>
</html>

Я так понимаю, это может быть проблема с роутером?Что странно, потому что у меня нет маршрутов, перенаправляющих на index.html: 

{
  path: "users",
  component: UsersComponent,
},
{ path: "**", redirectTo: "users" },

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Я решил проблему, написав этот файл .htaccess в папке json: 

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(CONFIG|DATA).json$ - [NC,F,L]

и написание простой получить в моем сервисе 

  constructor(private http: HttpClient) {
}

  public getSingleField(field) {
    this.http.get(`./src/app/assets/${field}.json`);
}
0 голосов
/ 25 января 2019

Может потребоваться отправить заголовок в запросе, а также утешить ответ преобразованием json. Проверьте следующее ... 

public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"}, {headers:'Content-Type': 'application/json'})
    .subscribe((data) => console.log(data.json()));
}

Вы можете делать синтаксические исправления.

...