Импорт JSON с сервера в Angular

Question

Я читаю данные из JSON, который является сервером, и он регулярно обновляется и изменяется. Мне нужно иметь возможность читать этот JSON с сервера, чтобы отображать самую актуальную информацию на своей веб-странице.

В настоящее время, чтобы иметь возможность читать JSON-файлы, они хранятся в той же папке проекта, что и мой угловой проект. (Это было потому, что они не были настроены на сервере при запуске).

Вот как я сейчас импортирую JSON, чтобы иметь возможность читать его:

import jsonInfo from '../../../info.json'

Я думал, что смогу изменить ссылку на файл на адрес сервера, вот так:

import jsonInfo from 'http://servername/folder/info.json'

Но VSCode выдает мне ошибку: Cannot find module 'http://servername/folder/info.json'

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

У меня вопрос: как мне импортировать JSON в мои .ts с сервера, чтобы я мог получать обновленную информацию из JSON?

Answer 1

JSON-файл на сервере аналогичен любому другому веб-ресурсу, к которому вы пытаетесь обратиться (например, к конечной точке API).

Поэтому для доступа к этому JSON-файлу следует использовать встроенный угловой клиент http.

Например:

import { HttpClient } from '@angular/common/http';

export class SomeService {
  constructor(private http: HttpClient) { }

  getInfo() {
    return this.http.get('http://servername/folder/info.json');
  }

}


//...

export class SomeComponent implements OnInit {

  info: any;

  constructor(private someService: SomeService) {}

  ngOnInit() {
    this.someService.getInfo().subscribe(info => this.info = info)
  }

}

Answer 2

Вы можете использовать HttpClient и делать, как показано ниже

Рабочая демоверсия

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  name = 'Angular';
  data = [];

  apiUrl = 'http://servername/folder/info.json';

  GetData() {
    this.http.get<any[]>(this.apiUrl)
      .subscribe(data => {
        this.data = data;
      });
  }

  ClearData() {
    this.data = [];
  }

  constructor(private http: HttpClient) {}
  ngOnInit() {}

}

Answer 3

Используйте метод get HttpClient.

this.httpClient.get('http://servername/folder/info.json').subscribe(data => { 
  // your logic
})