title: display values of object from json ionic 3
body: <p>
  I try to get a random object from a local Json file in my Ionic3 App. </p>
  
  <p>Instead of displaying all "questions", "answers" and "hints" from my "cards", I would like to display only the values of a randomly selected card.</p>
  
  <p>This is a dummy project and I am not sure what's the appropriate way to do this.</p>
  
  
  
  <p><strong>home.ts</strong></p>
  
  <pre><code>  cards: any;
  
    getLocalData() {
      this.http.get('assets/data/cards.json').map(res =&gt; res.json()).subscribe(res =&gt; {
          this.cards = res.cards;
          this.cards.rd = this.cards[Math.floor(Math.random() * this.cards.length)];
          console.log(this.cards.rd);
      },
       (err) =&gt; {
        alert("failed loading json data");
      })
    }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code> &lt;button ion-button round (click)="getLocalData()"&gt;Charger&lt;/button&gt;
  
      &lt;ion-list&gt;
        &lt;ion-item *ngFor="let card of cards"&gt;
          &lt;h2&gt;{{card.question}}&lt;/h2&gt;
          &lt;h2&gt;{{card.answer}}&lt;/h2&gt;
          &lt;h2&gt;{{card.hint}}&lt;/h2&gt;
        &lt;/ion-item&gt;
      &lt;/ion-list&gt; 
  </code></pre>
  
  <p><strong>cards.json</strong></p>
  
  <pre><code>{
    "cards": [
      {
        "id": "1", 
        "question": "question 1",
        "answer": "reponse 1",
        "hint": "hint 1"
      },
      {
        "id": "2",
        "question": "question 2",
        "answer": "reponse 2",
        "hint": "hint 2"
      },
      {
        "id": "3",
        "question": "question 3",
        "answer": "reponse 3",
        "hint": "hint 3"
      }
    ]
  }
  </code></pre>