webentwicklung-frage-antwort-db.com.de

So rufen Sie die JSON-Datei in Angular 2 ab

da ich neu bei Angular bin, kann jeder eine einfache Lösung zum Laden der JSON-Dateidaten mit Winkel 2 angeben.

Mein Code ist wie folgt

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>

app.component.ts

import {Component} from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
          <div id="main">
            Main Div
               <div id = "header"></div>
               <div id = "content">
                  <ul class="games">
                      <li>
											
                      </li>
                  </ul>
               </div>
          </div>
  		 `
})
export class AppComponent {
 }

games.json

{
	"games":[
		{
			"title":"Primary Operations",
			"enabled":true
		},
		{
			"title":"Curated Games",
			"enabled":false
		}
	]
}

Ich möchte alle Spiele von games.json unter app.component.ts .__ in li abrufen.

Danke im Voraus

31
Vishu

Hier ist ein Teil meines Codes, der JSON analysiert, es kann für Sie hilfreich sein:

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));

     }
}
53

Behalten Sie die json-Datei im Verzeichnis Assets (parallel zum Anwendungsverzeichnis)

Wenn Sie mit ng new YourAppname generiert hätten, besteht dieses Asset-Verzeichnis in derselben Zeile wie das 'app'-Verzeichnis, und Services sollten das untergeordnete Verzeichnis des app-Verzeichnisses sein. Kann wie folgt aussehen:

:: app/services/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);
} 
36
HydTechie

Bei Verwendung von angle-cli Bewahren Sie die json-Datei im Verzeichnis Assets (parallel zum Anwendungsverzeichnis) auf

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);
}

Hinweis: Hier müssen Sie nur den Pfad innerhalb des Assets-Ordners wie assets/json/oldjson.json angeben. Dann müssen Sie Pfad wie /json/oldjson.json schreiben 

Wenn Sie Webpack verwenden, müssen Sie über der gleichen Struktur im Öffentlichen Ordner wie in dem Assets-Ordner arbeiten.

11
Vijay Gajera

In Winkel 5

du kannst es einfach sagen 

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

Dadurch erhalten Sie Observable<Example>

8
Jana

Sie müssen einenHTTP- Aufruf an Ihren games.json ausführen, um ihn abzurufen . So etwas wie:

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

Sie brauchen nicht HttpClient , Sie brauchen nicht einmal Angular. Sie benötigen lediglich WebPack und JSON-Loader, beide sind bereits Bestandteil von Angular-CLI. 

Alles, was Sie brauchen, ist diese Zeile:

import * as someName from './somePath/someFile.json;

Und Ihre Json-Daten finden Sie unter someName.default. Dieser Code wird jedoch einen Typfehler vom TypeScript-Compiler auslösen. Dies ist kein echter Fehler, sondern nur ein Typfehler.

Um es zu lösen, fügen Sie diesen Code in Ihre src/typings.d.ts-Datei ein (falls nicht vorhanden, erstellen Sie ihn):

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

Bitte beachten Sie : Wenn Sie mit dieser Methode arbeiten, wird Ihr json (minify/uglify) zur Buildzeit in das App-Paket kompiliert. Dies bedeutet, dass Sie nicht warten müssen, bis diese Datei geladen wird. Dies ist auch der Fall, wenn Sie sich für httpClient.get(...) entscheiden. Dies bedeutet eine schnellere Anwendung!

2
Gil Epshtain

ich denke, der Ordner für Assets ist öffentlich. Sie können direkt über den Browser darauf zugreifen

http: // localhost: 4020/assets/

im Gegensatz zu anderen Privatenordnern legen Sie Ihre Json-Datei im Assets-Ordner ab

2
Anthony Agbator
service.service.ts
--------------------------------------------------------------

import { Injectable } from '@angular/core';
import { Http,Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
 private url="some URL";

constructor(private http:Http) { }     

//getData() is a method to fetch the data from web api or json file

getData(){
           getData(){
          return this.http.get(this.url)
            .map((response:Response)=>response.json())
        }
          }
}






display.component.ts
--------------------------------------------

// In dieser Komponente erhält man die Daten mit suscribe () und speichert sie in local object als dataObject und zeigt sie in display.component.html wie {{dataObject .propertyName}} an. 

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
      dataObject :any={};
constructor(private service:ServiceService) { }

  ngOnInit() {
    this.service.getData()
      .subscribe(resData=>this.dataObject =resData)
}
}
1

Ich musste die Einstellungsdatei synchron laden, und dies war meine Lösung:

export function InitConfig(config: AppConfig) { return () => config.load(); }

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
    Settings: ISettings;

    constructor() { }

    load() {
        return new Promise((resolve) => {
            this.Settings = this.httpGet('assets/clientsettings.json');
            resolve(true);
        });
    }

    httpGet(theUrl): ISettings {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }
}

Dieser wird dann als app_initializer bereitgestellt, der vor dem Rest der Anwendung geladen wird. 

app.module.ts

{
      provide: APP_INITIALIZER,
      useFactory: InitConfig,
      deps: [AppConfig],
      multi: true
    },
0
jonas