Angular4-如何检查Twitter媒体密钥是否存在或未定义 [英] Angular4 - how to check if Twitter media key exists or is undefined

问题描述

要构建此问题 ...我希望能够返回帐户时间轴的最后5条推文，以及它们可能附带的任何图像.我的问题是，在对Twitter的API进行搜索调用时，返回的某些tweet JSON根本不包含entity.media.media_url键.如果我在通话中包含了entities.media.media_url，并且该tweet不包含任何附件，那么它将中断整个请求，并且根本不会呈现任何tweet.在呈现请求之前，是否可以检查推文中是否包含该信息?例如，在尝试分析这两个推文时:

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(无图像)

tweet1 (no image)

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

tweet2(包含附件图像)

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": {...},
  ...
}

我有一个node.js后端来处理搜索调用的大部分工作(此之后教程)， 我的tweets.component.ts抓取元素并将它们分配给要在前端插值的变量.

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

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

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>

推荐答案

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

这篇关于Angular4-如何检查Twitter媒体密钥是否存在或未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！