HTML内でtwitter API関数を呼び出して結果を表示するにはどうすればよいですか？

私は、app.jsファイルで使用すると、twitterストリームを正常に開き、下記の内容を表示する機能を持っています（printの代わりにconsole.logが使用されている場合）。しかし、私が関数をとり、index.htmlの中のスクリプトに入れると、エラーが発生する"referenceError：require not defined"他のスクリプトでGETエラーが発生することがあります。私はそれらを間違って参照しています。私はそれらを1つだけに含めてみました。HTML内でtwitter API関数を呼び出して結果を表示するにはどうすればよいですか？

私はこのすべてを自分で学習しようとしています。私は過去に単純に静的なウェブサイトを作ったが、html、css、そしていくつかの基本的なjqueryしか使わなかった。私はcssを使って関数によってテキスト出力を書式化することができるようにしたい。

<!DOCTYPE html> 
<html> 
<head> 
<title>Streaming</title> 
<script src="..Twitter/config.js"></script> 
<script src="..Twitter/package.json"></script> 
<script src="..Twitter/app.js"></script> 
<script type = "text/javascript"> 


function displayStream() { 
    var Twit = require('twit'); 
    var T = new Twit(config); 
    var stream = T.stream('statuses/filter', { track: 'Bernie Sanders' }); 
    var count = 0; 
    var totalSentiment = 0; 

     stream.on('tweet', function (tweet) { 
     //Exclude retweets 
     if(tweet.text.startsWith("RT") === false) { 

      print(tweet.text) 
      print("Sentiment score: " + sentiment(tweet.text).score) 
      count += 1; 
      totalSentiment += sentiment(tweet.text).score; 
      print(count + " tweets analyzed"); 
      print("Aggregate Sentiment: " + totalSentiment); 
      print("Average Sentiment:" + (totalSentiment/count).toFixed(2) + "\n"); 
}; 

}); 

};

</head> 
<body onload="displayStream();"> 

    <h1>Welcome to my website</h1> 


<p>displayStream()</p>

出典

2016-04-14 Marc Fletcher

は '..Twitter/config.js'が有効なパスではありません、おそらく' ../Twitter/configする必要があります.js'です。 –

Using Ajax script you can request URL and get response in following way

$.ajax({ 
    url: 'url', 
}) 
.done(function(data) { 
document.getElementById("#myResponse").innerHTML=data; 
}) 
.fail(function() { 
    alert("Ajax failed to fetch data") 
})

Using plain Jquery you can achieve same result by following way using Jquery load function

$("#div").load("url", function(response, status, xhr) { 
console.log(response.ok); 
document.getElementById("#myResponse").innerHTML=response; 
if (status == "error") { 
} 
});

Using pure javascript you can achieve using XMLHttpRequest

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == XMLHttpRequest.DONE) { 
alert(xhr.responseText); 
} 
} 
xhr.open('GET', 'url', true); 
xhr.send(null);

出典

2016-04-14 04:23:57

私はしたいと思っていますが、このプロジェクトではjQueryを使うのではなく、普通のjavascript –

'フレームワーク/ライブラリ用の別のタグが含まれていない限り、純粋なJavaScriptの回答が期待されます。 –

このコードスニペットは問題を解決する、[説明を含む]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 - [レビューから]（0120-333-100） – Ferrybig

ちょうどjavasciptの場合、fetchApiを使用できます。 AJAXと同じ感触を提供します。例えば

：

fetch('ApiToFetchTweets', { 
     method: 'get' 
     }) 
     .then(function(response) { 
      console.log('response here: ',response); 


     }).then(function(json) { 
     //console.log('parsed json', json); 
     }).catch(function(ex) { 
     //console.log('parsing failed', ex); 
     })

おかげで、

ディネッシュ

出典

2016-04-14 05:49:50 Dineshaws

私のコードとの関連でそれを置くことができますか？あなたのコードを私のものと統合する方法がわかりません。 –

twitterフィードを取得するために使用するサーバー側の言語を確認してください。だから私はあなたの要件に応じて私の答えを更新することができます。 – Dineshaws

NodeJsとtwitパッケージで表現する –

HTML内でtwitter API関数を呼び出して結果を表示するにはどうすればよいですか？

答えて

関連する問題