Angular 2 - как заполнить локальную переменную данными JSON из внешнего файла

Учебники Angular 2 Я прочитал переменные места непосредственно в файле app.component.ts. Например, var BAR ниже, который извлекает данные через интерфейс {Foo}.

import {Component} from 'angular2/core';
import {Foo} from './foo';

@Component({
   etc.
});

export class AppComponent {
   bar = BAR;
}

var BAR: Foo[] = [
   { 'id': 1 },
   { 'id': 2 }
];

Однако у меня есть данные для BAR в локальном файле JSON. Я не верю {HTTP_PROVIDER}. Как я могу получить данные JSON из внешнего файла?

Ответ 1

Создайте файл с этим контентом

export const BAR= [ { 'id': 1 }, { 'id': 2 } ];

сохраните его как BarConfig.ts или, например,

используйте его следующим образом

import { BAR } from './BarConfig'; let bar= BAR;

или даже лучше, используйте BAR прямо там, где вам нужно

Ответ 2

HTTP_PROVIDER необходим, если вы хотите загрузить файл с помощью http.

Вот пример загрузки локального json файла по http:

this.result = {friends:[]};
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);

Подробнее здесь: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Ответ 3

Juste поместите ваш .json файл в вашу статическую папку (/assets, если вы используете angular cli), и он должен работать.

Ответ 4

Лучший вариант - создать json файл и сохранить json файлы внутри файла и вызвать этот файл, как показано ниже.

Если вы используете angular -cli Храните файл json в папке "Каталог ресурсов" (параллельно с dir).

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Примечание: здесь вам нужно только указать путь в папке с ресурсами, например assets/json/oldjson.json, тогда вам нужно написать путь, как /json/oldjson.json

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

Ответ 5

Вы можете использовать поставщика Http в angular2

Убедитесь, что поместите локальный файл json в папку www.

getLocalFile(){
    return this.http.get('./localFileName.json').
        map(res => res.json());
}

Это вернет вам локальный файл JSON.