Как получить JSON файл в Angular 2

поскольку я новичок в Angular, может ли кто-нибудь дать простое решение по загрузке данных файла JSON с помощью angular 2.

Мой код выглядит ниже

Index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Ответы

Ответ 1

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

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable<any> {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

Ответ 2

Сохраните файл json в каталоге Assets (параллельно с dir).

Обратите внимание, что если бы вы сгенерировали с новым новым именем YourAppname - этот каталог ресурсов существует в той же строке с каталогом "app", а служба должна быть дочерней папкой каталога приложения. Может выглядеть следующим образом:

:: приложения/услуги/myservice.ts

getOrderSummary(): Observable {
    // get users from api
    return this.http.get('assets/ordersummary.json')//, options)
        .map((response: Response) => {
            console.log("mock data" + response.json());
            return response.json();
        }
    )
    .catch(this.handleError);
}

Ответ 3

Если вы используете 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, вам нужно следовать над той же структурой внутри общей папки, что и аналогичная папка с ресурсами.

Ответ 4

Вам нужно сделать HTTP-вызов для games.json для его получения. Что-то вроде:

this.http.get(./app/resources/games.json).map

Ответ 5

Как импортировать json в TypeScript/Angular2/4

В ES6/ES2015 вы можете импортировать json файл в свой код. Например,

Учитывая, что у вас есть этот example.json файл:

{
    "name": "nadeem"
}

Вы можете импортировать его в ES6/ES2015 следующим образом.

// ES6/ES2015
// app.js
import * as data from './example.json';
const myname= data.name;
console.log(myname); // output 'nadeem'

однако, тот же код будет вызывать ошибку:

Не удается найти модуль 'example.json'

Решение: использование имени модуля подстановок

В TypeScript версии 2 + мы можем использовать подстановочный знак в имени модуля. В файле определения TS, например. typings.d.ts, вы можете добавить эту строку:

declare module "*.json" {
    const value: any;
    export default value;
}

Также укажите, что значение имеет тип <any>, вы можете его настроить

Voila Это все, что вам нужно сделать.

Надеюсь, это сэкономит время и обычный HTTP-запрос!

Ответ 6

В Angular 5

вы можете просто сказать

this.http.get<Example>('assets/example.json')

Это даст вам Observable<Example>

Ответ 7

Я думаю, что папка с ресурсами общедоступна, вы можете получить к ней доступ непосредственно в браузере

http://localhost:4020/assets/

в отличие от других приватных папок, отпустите свой json файл в папке с ресурсами