Accessing nested json array in Angular2

Question

I am trying to get first object from the nested json in angular2. Can any one help me in fetching first json object.
Sample Json:

var Datalist = [{"id":1,"status":"completed"},{"id":2,"status":"Not completed"},{"id":3,"status":"Not completed"}]

My angular code:

<ul class="list-group">
<li *ngFor="let c of Datalist"
    class="list-group-item">
    <label> {{c.status}} </label>
         <span class="pull-right">{{c.id}}</span>
</li>
</ul>

Now i am getting all 3 id's and status's. I just want first object,1,completed

Sajeetharan · Accepted Answer · 2017-10-31 09:39:03Z

1

You dont need to use ngFor if you need only the first item, access the first element using 0th index

<ul class="list-group">
<li  class="list-group-item">
    <label> {{Datalist[0].status}} </label>
    <span class="pull-right">{{Datalist[0].id}}</span>
</li>
</ul>

answered Oct 31, 2017 at 9:39

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Saurabh Agrawal · Accepted Answer · 2017-10-31 09:38:42Z

1

Try this

<ul class="list-group">
<li class="list-group-item">
    <label> {{Datalist[0].status}} </label>
         <span class="pull-right">{{Datalist[0].id}}</span>
</li>
</ul>

answered Oct 31, 2017 at 9:38

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Comments

Mohamed Ali RACHID · Accepted Answer · 2017-10-31 09:41:15Z

0

you need to test if the status is completed or not , using ngIf directive :

<ul class="list-group">
<li *ngFor="let c of Datalist"
    class="list-group-item">
    <label *ngIf="c.status==='completed'"> {{c.status}} </label>
    <span class="pull-right" *ngIf="c.status==='completed'">{{c.id}}</span>
</li>
</ul>

answered Oct 31, 2017 at 9:41

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

Comments

Chandru · Accepted Answer · 2017-10-31 09:46:00Z

0

Try like this :

<ul class="list-group">
    <span *ngFor="let c of Datalist; let i = index; ">
        <li class="list-group-item" *ngIf="i == 0">
            <label> {{c.status}} </label>
            <span class="pull-right">{{c.id}}</span>
        </li>
    </span>
</ul>

answered Oct 31, 2017 at 9:46

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Accessing nested json array in Angular2

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related