Display only the first item of object array

Question

I have an array that i want to display from it the first item in a span .

At the moment i'm getting all the value instead of only the first one.

  <div class="card">  
    <div *ngIf="selectedUser._id">
      <div class="user" *ngFor="let user of users">
             <span>  {{ user.event }} </span>
            </div>
  </div>
  </div>

It's returning me the list of all users date event, i only want the first one

I also tried to add user.event[0] not working it's displaying me the first char of the date

my array of object

[{id:XYZ, event:Fri Jul 20 2018 15:00:04 GMT+0200 (CEST)},{id:XYZ1, name:Fri Jul 10 2018 15:00:04 GMT+0200 (CEST)},{id:XYZ2, name:Fri Aug 20 2018 15:00:04 GMT+0200 (CEST)}]

where is the date? can use post the structure of users?

Sajeetharan
– Sajeetharan

2018-08-03 10:24:12 +00:00
Commented Aug 3, 2018 at 10:24 — Sajeetharan
– Sajeetharan, Commented Aug 3, 2018 at 10:24

Malindu Sandaruwan · Accepted Answer · 2018-08-03 10:18:29Z

1

Use the simple approch below,

<div class="card">  
    <div *ngIf="selectedUser._id">
      <div class="user">
         <span>  {{ users[0].event }} </span>
      </div>
    </div>
</div>

answered Aug 3, 2018 at 10:18

Malindu Sandaruwan

1,5173 gold badges15 silver badges28 bronze badges

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

2 Comments

Malindu Sandaruwan Over a year ago

This is the most simple working solution to this as I think

LisaN Over a year ago

unfortunately tried this i get TypeError: Cannot read property 'date' of undefined

Krishna Rathore · Accepted Answer · 2018-08-03 10:25:04Z

0

you can use slice pipe.

<div class="user" *ngFor="let user of users | slice:0:1;">
    <span>  {{ user.event }} </span>
</div>

answered Aug 3, 2018 at 10:25

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

lakshitha madushan · Accepted Answer · 2018-08-03 10:36:31Z

0

<div class="card">
  <div>
    <div class="user">
      <div>{{users[0]}}</div>
    </div>
  </div>
</div>

answered Aug 3, 2018 at 10:36

lakshitha madushan

6694 silver badges7 bronze badges

1 Comment

Nic3500 Over a year ago

stackoverflow.com/help/how-to-answer. Please explain your answer and how it solves the problem in the question.

Sajeetharan · Accepted Answer · 2018-08-03 11:53:49Z

0

You dont need

<div class="card">  
    <div>
      <div class="user">
             <span>    {{ users[0].event | date:'medium' }} </span>
     </div>
</div>

STACKBLITZ DEMO

answered Aug 3, 2018 at 11:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Display only the first item of object array

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related