Display first element of array without looping

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)
   }
]

I tried this solution that is working and achieving what i want

<div class="message" *ngFor="let user of users | slice:0:1;">

But I know this is looping through the array, I need to get the first element without doing it.

I already tried this :

<span> {{ users[0].event }} </span>

it's throwing me an error cause sometimes the event is undefined

chances are big that you want to make the entire div or span conditional to the existence of users[0], which leads me to the conclusion that you want to centralize it in a method firstUser, see below. — bvdb
– bvdb, Commented Aug 9, 2018 at 9:31

Fabian N. · Accepted Answer · 2018-08-09 12:19:01Z

3

You should check if array item is empty or not

<span> {{ users && users.length ? users[0].event : '' }} </span>

edited Aug 9, 2018 at 12:19

Fabian N.

3,8682 gold badges27 silver badges47 bronze badges

answered Aug 9, 2018 at 8:53

hgiasac

2,23319 silver badges14 bronze badges

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

Comments

FAISAL · Accepted Answer · 2018-08-09 09:09:17Z

2

Use the safe navigation operator i.e. ? to make sure the users array is checked for undefined.

The Angular safe navigation operator (?.) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank, but the app keeps rolling without errors.

<span *ngIf="users[0]">
    {{ users[0]?.event }}
</span>

Link to StackBlitz Demo.

edited Aug 9, 2018 at 9:09

answered Aug 9, 2018 at 8:57

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

3 Comments

bvdb Over a year ago

the question remains, do you even want an empty span if there is no user. Perhaps you don't want to print the span all together in that case. Or perhaps you want to print "no user found"

FAISAL Over a year ago

@bvdb add an *ngIf then, see the updated answer and demo.

bvdb Over a year ago

indeed, but then you don't need the ? operator, right ?

Syed Kashan Ali · Accepted Answer · 2018-08-09 09:30:52Z

2

Just try this:

<span> {{ users[0]?.event }} </span>

answered Aug 9, 2018 at 9:30

Syed Kashan Ali

6634 silver badges8 bronze badges

Comments

bvdb · Accepted Answer · 2018-08-09 09:29:45Z

0

I think the simplest solution will be to write a method firstUser() in your Component class.

Your typescript file should contain

firstUser () {
  return this.users[0];
}

This just keeps your html section as clean as possible. Chances are big that you will need to use it twice anyway:

    <div class="user" *ngIf="firstUser" >
         <span>  {{ firstUser.event }} </span>
    </div>

You may even want to print a message like "no user found" instead.

edited Aug 9, 2018 at 9:29

answered Aug 9, 2018 at 8:55

bvdb

25.2k11 gold badges123 silver badges135 bronze badges

Collectives™ on Stack Overflow

Display first element of array without looping

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related