如何解析這個JSON結構的列表視圖angular2 nativescript

JSON結構：如何解析這個JSON結構的列表視圖angular2 nativescript

{ 
    "Employee": [ 
     {"id":1,"name":"Dan" }, 
     {"id":2,"name":"Stack" }, 
     ..... 
    ] 
}

app.component.ts：

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

    this.globalReader.getObjectData() 
     .subscribe(data => this.getData = JSON.stringify(data), ---> Response printed successfully here.I'm able to print it in label. 
     error => alert(error), 
     () => console.log("finished") 

    );  

    }

編輯：

組件：

<label text ="{{getData }}" ></label> 



    getObjectData() { 

    return this._http.get('/page/emp.json') 
     .map((response :Response) => response.json()); 

    }

之後，我不知道如何解析json，並在此結構的列表視圖中打印它。我提到了一些視頻和雜貨申請。但我仍然無法得到結果。我非常困惑與數組名員工。

我只需要從列表視圖中的響應打印name。

來源

2017-06-19 Steve

你能告訴我們更多你的組件代碼嗎（你期望'this.getData是什麼類型？），也可能是你的模板？ 'JSON.stringify（data）'只會將您的數據打印爲json序列化的字符串。 –

@FredrikLundin是的。我只需要打印name.please檢查我編輯過的文章 – Steve

謝謝，你還可以顯示'globalReader.getObjectData（）'函數，所以我們可以看到它返回的是什麼？ –

這應該工作：

<ListView [items]="employees" row="1"> 
    <template let-item="item"> 
     <Label [text]="item.name"></Label> 
    </template> 
</ListView> 

// Create Employee Class: 

export class Employee { 
    constructor(public id: string, public name: string) {} 
} 

// Your component: 

this.employees: Array<Employee> = []; 

ngOnInit() { 
    this.globalReader.getObjectData() 
     .subscribe(data => { 
         this.employees = data.Employee.map(item => new Employee(item.id, item.name); 
        }); 
     });  
} 

// The getObjectData method of *globalReader* service: 

getObjectData() { 
    return this._http.get('/page/emp.json') 
     .map((response :Response) => response.json().data); 
}

根據對象的不同由http呼叫返回，.data可能不是必需的：

getObjectData() { 
    return this._http.get('/page/emp.json') 
     .map((response :Response) => response.json()); 
}

來源

2017-06-19 11:44:21 Faly

我得到這個問題'不能讀取財產員工' – Steve

謝謝你的答案。同樣的問題。我認爲這可能是我錯過了每個循環。 – Steve

我編輯了答案 – Faly

您需要將數據映射，而不是Strigify數據

this.globalReader.getObjectData() 
    .subscribe(data => this.getData = data.employee.map(e => e.name))

，你可以把它像以下：

<ListView [items]="getData"> 
    <template let-item="item"> 
     <StackLayout> 
      <Label [text]='"ID: " + item.id'></Label> 
      <Label [text]='"Name: " + item.name'></Label> 
     </StackLayout> 
    </template> 
</ListView>

來源

2017-06-19 11:32:31

如何解析這個JSON結構的列表視圖angular2 nativescript

回答

相關問題