如何在网页上显示来自 Twitter 的标签计数答案

【问题标题】：How to show the hashtag count from Twitter on a web page如何在网页上显示来自 Twitter 的标签计数
【发布时间】：2019-02-13 03:16:55
【问题描述】：

我正在尝试找出在网页上显示来自 Twitter 的特定主题标签的计数的最佳方式。我认为这将是一项相当容易的任务，但我遇到了一些困惑。最终目标是在页面加载时显示计数。它不必是动态的，只需在页面加载时运行请求。

我有一个 Twitter 开发帐户，但我看不到如何在文档中的任何地方获取哈希计数。

https://developer.twitter.com/en/docs

我还发现了这个：https://github.com/cstephen/hashtag-count，它正在做我想做的事，但通过 npm。我不知道如何将该对象从 gulpfile 转换为 vanilla javascript 以在 html 中显示它。此外，将其放入 gulp 意味着我需要在服务器上设置一个运行器。

到目前为止，我得到了这个：

gulp 路径：

var hc = new HashtagCount({
  'consumer_key': '...',
  'consumer_secret': '...',
  'access_token': '...',
  'access_token_secret': '...'
});

// Array of hashtags to tally. Do not include # prefix.
var hashtags = ['superbowl', 'pizza', 'beer'];

// Hashtag tallies for each time interval will be added to the results object.
var interval = '30 seconds';

// Delete data older than this.
var history = '5 minutes';

// Called at the end of each time interval.
var intervalCb = function (err, results) {
  if (err) {
    console.error(err);
  } else {
    console.log(results);
  }
};

// Open a connection to Twitter's Streaming API and start capturing tweets!
hc.start({
  hashtags: hashtags,       // required
  interval: interval,       // required
  history: history,         // optional
  intervalCb: intervalCb,   // optional
});

如果我走这条路，

A：如何将这个对象放入 javascript 中，以在 html 中显示整数？

B：如何在服务器上设置它以增量运行 gulp 任务？

我是否缺少更简单的解决方案？

更新

我已经让 npm exmaple 版本工作了。我只需要将数据从 Gulp 获取到 html。

我的 html 到目前为止

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hashtag Counter</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>Total Hashtag Count</h1>
    <p id="hashCount">Replace this string with the hashtag count</p>
</body>
</html>

【问题讨论】：

您能否详细说明什么是“特定主题标签的计数”？
我想在网页上显示特定主题标签的使用次数。

标签： javascript twitter gulp hashtag

【解决方案1】：

如果您进一步阅读 github 页面，您会发现 Result object

结果对象

结果对象具有相同的结构，无论它是否出现在 intervalCb 或 finishedCb 回调中。它采用以下形式，其中时间戳是 UTC 时间的 ISO 字符串，表示每个间隔的开始：

{
  '2017-01-16T00:00:10.606Z': { 'superbowl': 6, 'pizza': 1, 'beer': 8 },
  '2017-01-16T00:01:10.610Z': { 'superbowl': 7, 'pizza': 1, 'beer': 4 },
  '2017-01-16T00:02:10.612Z': { 'superbowl': 3, 'pizza': 1, 'beer': 0 }
}

知道我们可以像这样在结果部分使用它

// Called at the end of each time interval.
var intervalCb = function (err, results) {
  if (err) {

    console.error(err);

  } else {

    console.log( results );

    showHashTagsCount( twitterResults );
  }
};

有了所有信息，这里是一个示例函数：

const twitterResults = {
  '2017-01-16T00:00:10.606Z': { 'superbowl': 6, 'pizza': 1, 'beer': 8 },
  '2017-01-16T00:01:10.610Z': { 'superbowl': 7, 'pizza': 1, 'beer': 4 },
  '2017-01-16T00:02:10.612Z': { 'superbowl': 3, 'pizza': 1, 'beer': 0 }
};

function showHashTagsCount ( results )
{
  let totalTagsCount = 
    // Get the tags name and count from results
    Object.values( results ).map( hashTags => {
      
      // Get the tags count from hashTags and reduce to get the total
      return Object.values( hashTags ).reduce( ( acc, tagCount ) => acc + tagCount, 0 );
    
    // Reduce to get the total tags count
    }).reduce( ( acc, tagsCount ) => acc + tagsCount, 0 );
  
  // Show hash tags count
  document.getElementById( 'hashCount' ).textContent = totalTagsCount;
}

// Usage example
showHashTagsCount( twitterResults );

<h1>Total Hashtag Count</h1>
<p id="hashCount">Replace this string with the hashtag count</p>

【讨论】：

那个对象在 gulpfile 中。我如何将其拉入 DOM 以在客户端通过 html 呈现？
没有足够的关于您的项目结构的信息来回答这个问题。
现在，我的项目结构是一个 index.html 页面。我有一个资产文件夹，其中有 css 和 javascript。就是这样。
好的，但是您希望在哪里显示这些信息？在您页面上的现有元素中？通过动态添加它们？我们没有这方面的任何信息...
添加了我的 html 文件。想法是通过 ID 钩住该
元素并用数字替换文本。