如何獲得angular2 nativescript中的本地json文件路徑

我是nativescript angular2的新手。到目前爲止，我遵循文檔和與列表視圖做靜態數據。如何獲得angular2 nativescript中的本地json文件路徑
我把我的json文件放在app/utils/countries.json。
我不知道如何獲得本地文件路徑來解析關於這個json.Need建議。
下面我已經發布了帶有靜態數據的listview代碼。

打字稿：

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>

countries.json：（APP/utils的/ countries.json）：

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

    ] 
}

來源

2017-06-15 Steve

您選擇想要導入，你有你'應用程序/ utils'文件夾內的JSON文件？ – mast3rd3mon

@ mast3rd3mon yes。我需要解析位於app/utils/countries.json這個目錄下的countries.json文件。 – Steve

下面的代碼爲我檢索本地路徑json對象並將其顯示爲命令提示符。

getdata.component.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.component.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") 

);  

    } 


}

來源

2017-06-16 15:01:19 Steve

arrList = require("./utils/countries.json")應該做的伎倆。 arrList那麼將成爲{"countries": [...]}

來源

2017-06-15 08:06:31 mast3rd3mon

謝謝。我會嘗試這一個，讓你知道 – Steve

你可能不需要需要字符串中的'。/' – mast3rd3mon

我不知道如何解析數據。我沒有找到任何與此相關的示例。我只通過了http相關示例json.it似乎在這裏我不需要該http，因爲我需要解析它在本地路徑。 – Steve

您還可以使用import { Http } from "@angular/http";

從NativeScript的NSHttp對象將查找本地文件系統如果URL以〜/

有了這個開始，你可以替換URL取決於如果用戶在線或離線。

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

來源

2017-06-15 15:45:22

如何獲得angular2 nativescript中的本地json文件路徑

回答

相關問題