Angular4 - how to check if Twitter media key exist

Question

Building off of this question... I want to be able to return the last 5 tweets of an account's timeline, along with any images that they may have attached. My issue is that, when making search calls to Twitter's API, some of the tweet JSONs that get returned do not contain the entities.media.media_url key at all. If I include the entities.media.media_url as part of the call, and the tweet doesn't contain any attachments, it breaks the entire request and won't render any tweets at all. Is it possible to check if the tweet contains that information, before rendering the request? For example, in trying to parse these two tweets:

tweet1 (no image)

...
"created_at":"Tue Aug 29 17:30:29 +0000 2017"
"entities": {
   "hashtags": [{...},{...}],
   "symbols": [],
   ...
  },
  "metadata":{...},
  "user": {...},
  ...
}

tweet2 (contains an attached image)

...
"created_at":"Mon Aug 28 12:30:31 +0000 2017"
"entities": {
   "hashtags": [{...},{...}],
   "media":[ {"id":..., "id_str":"...", ..., "media_url": "...", 
   "media_url_https": "..."]
   "symbols": [],
   ...
  },
  "metadata":{...},
  "user": {...},
  ...
}

I have a node.js backend handling most of the work for the search call (following this tutorial), and my tweets.component.ts grabs the elements and assigns them to variables to be interpolated on the front end.

tweets.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';
import { Ng4TwitterTimelineService } from 'ng4-twitter-timeline/lib/index';
import { Http, Headers } from '@angular/http';
import { NgModel, NgForm, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tweets',
  templateUrl: './tweets.component.html',
  styleUrls: ['./tweets.component.scss'],
})
export class TweetsComponent implements OnInit {

  searchquery = 'musechat';
  tweetsdata;
  screen_name;
  user;
  profile_img_url;
  user_id;

  asset_img_url;

  // icon = this.tweetsdata[0].user.entities.profile_image_url;
   constructor (private http: Http) {}

  ngOnInit() {
    this.makecall();
    this.searchcall();
  }

  makecall() {
    const headers = new Headers();

    headers.append('Content-Type', 'application/X-www-form-urlencoded');

    this.http.post('http://localhost:3000/authorize', {headers: headers}).subscribe((res) => {
      // console.log(res);
    });
  }

  searchcall() {
    const headers = new Headers();
    // const searchterm = 'query=' + this.searchquery;
    const searchterm = 'query=from%3Adailymuse%20%23' + this.searchquery;


    headers.append('Content-Type', 'application/X-www-form-urlencoded');

    this.http.post('http://localhost:3000/search', searchterm, {headers: headers}).subscribe((res) => {
      this.tweetsdata = [
        res.json().data.statuses[0],
        res.json().data.statuses[1],
        res.json().data.statuses[2],
        res.json().data.statuses[3],
        res.json().data.statuses[4],
        // res.json().data.statuses[5],
      ];

      console.log(this.tweetsdata);
      this.screen_name = this.tweetsdata[0].user.screen_name;
      this.user = this.tweetsdata[0].user.name;
      this.profile_img_url = this.tweetsdata[0].user.profile_image_url_https;
      this.user_id = this.tweetsdata[0].user.id_str;
    });
  }
 }
}

tweets.component.html

<div class="twitter-container">
    <div class="twitter-carousel">
        <div class="twitter-header">
            <a class="tw-header" href="http://twitter.com/intent/user?user_id={{user_id}}" target="_blank">
                <img class="twitter-icon" src={{profile_img_url}}>
                <span>{{user}}</span>
                <span class="twitter-screen">@{{screen_name}}</span>
            </a>
        </div>

        <hr>

        <div class="tweet-container">
            <div *ngFor="let item of tweetsdata" class="tweets-card">
                <div class="tweet-text">
                    <p class="tweet-date">{{item.created_at | slice:0:10}}</p>
                    <p>{{item.text}}</p>
                    <!-- <div *ngIf="item.entities.media[0].media_url" class="tweet-img"> -->
                    <!-- <img [src]=item.entities.media[0].media_url/> --> <!-- either of these break the code if there is a tweet that doesn't contain an attached image -->
                    <div>


                        <p>{{getImage()}}</p>

                    </div>

                    <div class="interact-tweet">
                        <a href="https://twitter.com/intent/tweet?in_reply_to={{item.id_str}}" target="_blank"><i class="fa fa-reply" aria-hidden="true"></i></a>
                        <a href="https://twitter.com/intent/retweet?tweet_id={{item.id_str}}" target="_blank"><i class="fa fa-retweet" aria-hidden="true"></i></a>
                        <a href="https://twitter.com/intent/like?tweet_id={{item.id_str}}" target="_blank"><i class="fa fa-heart" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

Answer 1

if (entities.media) // Code if it exists here
else // Code if it doesn't here