How to parse nested array values from json and show it in listview template nativescript angular2

Question

In below json structure if you see marks array. I have to get and show the mark array body value : first, second and third.
These first, second and third values placed inside marks Array. I don't know how to fetch this value and show it in listview template.
I just want to show all the three values in every 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;

    }
}

Syntactic Fructose · Accepted Answer · 2018-03-07 18:44:58Z

1

Since marks is an array of Objects, you should be able to access these values via array access followed by field access:

<StackLayout>
    <Label [text]="item.marks[0].body.first" class="user-title"></Label>
    <Label [text]="item.marks[0].body.second" class="item-title" textWrap="true"></Label>
    <Label [text]="item.marks[0].body.third" class="item-title" textWrap="true"></Label>
</StackLayout>

But if you want to show all marks without manually specifying an index for marks, you'll need one more for loop.

answered Mar 7, 2018 at 18:44

Syntactic Fructose

20.3k26 gold badges102 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephen Over a year ago

we cant sure how many messages we will be getting in services. it may be two or three or four, etc.. so i'm looking for dynamic way of marks[i]. But its overlapping the label one after another. Not able to use two listview in single template

Syntactic Fructose Over a year ago

Just make it a for loop then. *ngFor="let obj of item.marks" then within the for loop add labels using <Label [text]=obj.body.first ....

Collectives™ on Stack Overflow

How to parse nested array values from json and show it in listview template nativescript angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related