Hi so I have some code that runs that pulls star wars information from an api. It took a while but I got that working, only thing is, one button outputs all the information. I'm wondering how I can jump back and forth on the api to out put different things if thats possible.

the Luke Skywalker button will output all information for luke, c-3P0 and r2-d2. I know its because thats the only button that works, but im not sure how to implement it otherwise.

//html

<button (click)="onClick()">Luke Skywalker</button>
<button type="button">C-3PO</button>
<button type="button">R2-D2</button>


<ion-list>
<ion-item *ngFor="let user of users">
    <h1>Name: {{ user.name }}</h1>
    <h1>Height: {{ user.height }}cm</h1>
    <h1>Mass: {{ user.mass }}kg</h1>
    <h1>Hair Color: {{ user.hair_color }}</h1>
    <h1>Skin Color: {{ user.skin_color }}</h1>
    <h1>Eye Coloe: {{ user.eye_color }}</h1>
    <h1>Birth Year: {{ user.birth_year }}</h1>
</ion-item>
</ion-list>

//onclick

  users = [];
  errorFromSubscribe;
  errorFromCatch;
  displayItems;

  constructor(private http: Http) { }

  onClick() {
     this.http.get('https://swapi.co/api/people')
     .subscribe((res: Response) => {
      this.users = res.json().results; 
      console.log(this.users)
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
      });
  }

Api I'm using: https://swapi.co/api/people

There are more people in the api, but for the purpose of the question i'm only using the first 3.

So i really would like to know how can i press the C-3P0 button and get only c-3P0's info and not all the characters info.

Here's a screen of the output with console : https://imgur.com/M88Q1MP.