Wie man der lokalen json-Datei Pfad in angular2 nativescript

  • Ich bin neu nativescript angular2. So weit ich folgte Dokumentation und
    habe statische Daten mit listview.

  • Ich legte meine json-Datei in app/utils/countries.json.

  • Ich weiß nicht, wie man den lokalen Pfad der Datei zum Parsen der json.Notwendigkeit Vorschlag in Bezug auf diese.

  • Unten habe ich geschrieben die codes für das listview-Steuerelement mit statischen Daten.

Typoskript:

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {

 arrList: Array<Object> = [];

  ngOnInit() {
    this.arrList.push({ name: "India" });
    this.arrList.push({ name: "Sri Lanka" });
  }

 }

HTML:

<page-router-outlet></page-router-outlet>

<GridLayout>
  <ListView [items]="arrList" class="small-spacing">
    <ng-template let-item="item">
      <Label [text]="item.name" class="medium-spacing"></Label>
    </ng-template>
  </ListView>
</GridLayout>

Ländern.json: (app/utils/Ländern.json):

{
  "countries": [
              {"id":1,"name":"india"},
              {"id":2,"name":"Sri Lanka"}

   ]
}
  • Sie wollen importieren Sie eine json-Datei, die Sie haben in Ihrem app/utils Ordner?
  • ja .Ich muss analysieren, die Länder.json-Datei in dieses Verzeichnis app/utils/Ländern.json .
InformationsquelleAutor Luffy | 2017-06-15
  1. 1

    arrList = require("./utils/countries.json") sollte den trick tun. arrList würde dann {"countries": [...]}

    • danke .Ich werde versuchen, diese und lassen Sie Sie wissen,
    • Sie vielleicht nicht brauchen die ./ im verlangen string
    • Ich weiß nicht, wie zu analysieren Daten.Ich fand keine Probe damit in Zusammenhang stehen.Ich gegangen durch nur http-bezogene Beispiel für json.es scheint hier ich brauche das http, als ich brauche, um zu analysieren, es in den lokalen Pfad.
    • was meinst du? die Zuordnung arrList zu den Ländern.json-Datei bedeutet, dass arrList[0].id gleich 1 ist, ist arrList[1].id ist gleich 2 und so weiter
    InformationsquelleAutor mast3rd3mon
  2. 1

    Unten-codes für mich gearbeitet abrufen der lokale Pfad json-Objekte und gezeigt, dass Sie auf Eingabeaufforderung.

    getdata.Komponente.ts

       import {Injectable} from "@angular/core";
import {Http,Response} from '@angular/http';
import { HttpModule }      from '@angular/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/startWith';
import 'rxjs/Rx';

@Injectable()
   export class GetData {


constructor(private _http:Http) {

}


 getObjectData() {

 return this._http.get('/utils/countries.json')
   .map(data => console.log("Test", JSON.stringify(data.json())));

} 

}

    app.Komponente.ts:

    import { Component, OnInit, ViewChild } from "@angular/core";

 import { GetData } from './pages/getData.component';
 import { Observable } from 'rxjs/Observable';
 import {Http,Response, RequestOptions} from '@angular/http';

 @Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
    styleUrls: ["./app.css"],
    providers: [GetData]
 })

  export class AppComponent implements OnInit {

     setData : string;
     objectData : any;

     constructor(public getData: GetData, private http: Http) {
   
  }

  ngOnInit() {

   console.log("first", "Test");

   this.getData.getJsonObject()
  .subscribe(data => this.getData = JSON.stringify(data),
   error => alert(error),
   () => console.log("finished")

  );      

  }


}
    InformationsquelleAutor Luffy
  3. 0

    Können Sie auch import { Http } from "@angular/http";

    Den NSHttp Objekt aus NativeScript Aussehen wird, in das lokale Datei-system, wenn die url beginnt mit ~/

    Mit diesem können Sie ersetzen Sie die url, je nachdem, ob der Benutzer online oder offline ist. 

    getCountries(): Promise<any>  {
        return this.http.get("~/utils/countries.json", this.createRequestOptions())
            .toPromise()
            .then(resp => 
                resp.json()
            )
            .catch((error) => { 
                console.log(error);
            });
}

private createRequestOptions() {
    let headers = new Headers();
    //set headers here e.g.
    //headers.append("AuthKey", "my-key");
    //headers.append("AuthToken", "my-token");
    headers.append("Content-Type", "application/json");

    let options = new RequestOptions({ headers: headers });
    return options;
}
    InformationsquelleAutor Richard Hubley
  4. 0

    Eigentlich können Sie nur Lesen Sie synchron aus der Datei, zum Beispiel:

    import * as fs from 'tns-core-modules/file-system';

const countries = this.getJSONdata("countries.json");

getJSONdata(fileName: string) {
   const folder = this.getFolder("utils");
   const jsonFileName = fs.path.join(folder.path, fileName);
   const jsonFile = fs.File.fromPath(jsonFileName);
   const data = jsonFile.readTextSync().trim();
   if (data.length === 0) { data = "[]"; }

   return JSON.parse(data);
}

getFolder(folderName: string) {
   const path = fs.path.join(fs.knownFolders.currentApp().path, folderName);
   const folder = fs.Folder.fromPath(path);

   return folder;
}
    • Die oben genannten "fromPath" fordert, wird das erstellen von Ordnern/Dateien, wenn nötig.
    InformationsquelleAutor leoncc
Schreibe einen Kommentar