仅读取一个记录（json数组）的最佳实践

Question

I am reading the result of a REST-method (observable) that contains only one element by convention. Actually my code works (the data is display) but in the browser's console, I am receiving ERROR TypeError: Cannot read property 'primaryHashtag' of undefined.

Is it good practice to access the data as shown below (specifing element 0) or should I copy the data into another wrapper object? (which might just shift the problem)

Is it good practice to access the data like this?

<div class="thumbnail">
  <img src="http://placehold.it/320x150">
  <div class="caption">
    <h4 class="float-right">{{article[0].primaryHashtag}}</h4>
    <p>{{article[0].comments}}</p>
  </div>
</div>

Answer 1

You should always check for null and give it empty state. like below

<div class="thumbnail" *ngIf="article && article[0]">
<img src="http://placehold.it/320x150">
 <div class="caption">
  <h4 class="float-right">{{article[0].primaryHashtag}}</h4>
  <p>{{article[0].comments}}</p>
 </div>
</div>
<div *ngIf="!article || !article[0]">
 <empty-state-component>    </empty-state-component>
</div>

Else if you dont want empty state you just want check for null you can do

<h4 class="float-right">{{article[0]?.primaryHashtag}}</h4>
<p>{{article[0]?.comments}}</p>

Answer 2

You can use RxJS operators and to improve your code use angular async pipe :

In your component :

this.article$ = this.http.get<any[]>("YOUR_URI").pipe(
   map(res => res[0])
)

In your template

<div class="thumbnail" #ngIf="article$ | async as article">
  <img src="http://placehold.it/320x150">
  <div class="caption">
    <h4 class="float-right">{{article.primaryHashtag}}</h4>
    <p>{{article.comments}}</p>
  </div>
</div>

Answer 3

You can check whether the array contains data thought *ngIf statement to avoid undefined :

<div class="thumbnail">
  <div 
      *ngIf="article && article.length > 0" 
       class="caption">
    <h4 class="float-right" >{{ article[0].primaryHashtag }}</h4>
    <p>{{article[0].comments}}</p>
  </div>
</div>