In the JSON structure below, if you look at the
marks array, I need to extract and display the body value of the marks array: first, second, and third.The values first, second, and third are located inside the marks Array. I am unsure how to retrieve these values and display them in a listview template.
I simply want to display all three values in each listview item position.
students.json:
[
{
"id": 1,
"name": "denver",
"marks": [
{
"identity": [],
"body": {
"first": "Pollard",
"second": "Bravo",
"third": "Kevin"
}
},
{
"identity": [],
"body": {
"first": "Michael",
"second": "Waugh",
"third": "Stone"
}
}
]
},
{
"id": 2,
"name": "kallis",
"marks": [
{
"identity": [],
"body": {
"first": "Yuvi",
"second": "Maxwell",
"third": "Rock"
}
},
{
"identity": [],
"body": {
"first": "Steve",
"second": "Laughlin",
"third": "Jeff"
}
}
]
},
{
"id": 3,
"name": "younis",
"marks": [
{
"identity": [],
"body": {
"first": "Ben",
"second": "Stokes",
"third": "Smith"
}
},
{
"identity": [],
"body": {
"first": "Archer",
"second": "Matt",
"third": "Glenn"
}
}
]
}
]
app.component.html:
<StackLayout height="100%">
<ListView [items]="studentList" class="list-group" height="70%">
<ng-template let-item="item" let-i="index">
<StackLayout class="input-border">
<Label [text]="item.name" class="module-title"></Label>
<!-- <StackLayout>
<Label [text]="item.first" class="user-title"></Label>
<Label [text]="item.second" class="item-title" textWrap="true"></Label>
<Label [text]="item.third" class="item-title" textWrap="true"></Label>
</StackLayout> -->
</StackLayout>
</ng-template>
</ListView>
App.component.ts:
import { Component, OnInit } from "@angular/core";
import { ObservableArray } from 'data/observable-array'
import { Student } from './model/Student';
import * as Application from "application";
import { AppService } from './app.service'
@Component({
selector: "app",
moduleId: module.id,
providers: [AppService],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
private studentList: ObservableArray<Student>;
constructor(private appService: AppService) {
}
ngOnInit() {
this.studentList = this.appService.getStudent();
}
}
app.service.ts:
import { Injectable } from '@angular/core'
import { Student } from './model/Student'
import { ObservableArray } from 'data/observable-array'
var getData = require("./model/student.json");
@Injectable()
export class AppService {
getStudent(): ObservableArray<Student> {
var studentList: ObservableArray<Student> = new ObservableArray<Student>();
console.log("StudentArray", JSON.stringify(getData));
for (var i = 0; i <getData.length; i++) {
var student = new Student();
student.name = getData[i].name;
console.log("nameStudent", getData[i].name);
studentList.push(student);
}
return studentList;
}
}