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

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

javascript twitter gulp

Javascript 如何在网页上显示来自Twitter的标签计数,javascript,twitter,gulp,hashtag,Javascript,Twitter,Gulp,Hashtag,我试图找出在网页上显示来自Twitter的特定标签计数的最佳方法。我认为这将是一项相当简单的任务，但我遇到了一点困惑。最终的目标是在页面加载时显示计数。它不必是动态的，只要在页面加载时运行请求即可我有一个Twitter开发者帐户，但我不知道如何在文档中的任何地方获取散列计数我还发现：这是我想做的，但通过npm。我不知道如何将该对象从gulpfile转换为vanilla javascript，以html格式显示。此外，如果将其吞咽，则意味着我需要在服务器上设置一个运行程序到目前为止，我得到

我试图找出在网页上显示来自Twitter的特定标签计数的最佳方法。我认为这将是一项相当简单的任务，但我遇到了一点困惑。最终的目标是在页面加载时显示计数。它不必是动态的，只要在页面加载时运行请求即可

我有一个Twitter开发者帐户，但我不知道如何在文档中的任何地方获取散列计数

我还发现：这是我想做的，但通过npm。我不知道如何将该对象从gulpfile转换为vanilla javascript，以html格式显示。此外，如果将其吞咽，则意味着我需要在服务器上设置一个运行程序

到目前为止，我得到了：

吞咽路径：

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
});

如果我走这条路

答：如何将这个对象转换成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>


标签计数器
标签总数
将此字符串替换为hashtag计数

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

结果对象

结果对象具有相同的结构，无论它出现在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 twitter结果={
‘2017-01-16T00:00:10.606Z’：{‘超级碗’：6，‘比萨饼’：1，‘啤酒’：8}，
‘2017-01-16T00:01:10.610Z’：{‘超级碗’：7，‘比萨饼’：1，‘啤酒’：4}，
‘2017-01-16T00:02:10.612Z’：{‘超级碗’：3，‘比萨饼’：1，‘啤酒’：0}
};
函数showHashTagScont（结果）
{
让totalTagsCount=
//从结果中获取标记名称和计数
Object.values（results.map）（hashTags=>{
//从hashTags中获取标记计数，并减少以获取总数
返回Object.values（hashTags）.reduce（（acc，tagCount）=>acc+tagCount，0）；
//减少以获取标记总数
}).reduce（（acc，tagscont）=>acc+tagscont，0）；
//显示哈希标记计数
document.getElementById（'hashCount'）。textContent=totalTagsCount；
}
//用法示例
showHashTagScont（twitterResults）
Hashtag总计数
将此字符串替换为gulpfile中对象的hashtag计数。如何将其拉入DOM中，以便在客户端通过html进行呈现？关于您的项目结构没有足够的信息来回答这个问题。现在，我的项目结构是index.html页面。我有一个资产文件夹，里面有css和javascript。就这些。好的，但是你想在哪里展示这些信息呢？在页面上的现有元素中？通过动态添加它们？我们没有这方面的任何信息…添加了我的html文件。想法是通过ID钩住元素，并用数字替换文本。你能详细说明什么是“特定标签的计数”吗？我想在网页上显示特定标签的使用次数。