Twitter API Question posted in
The official Twitter API documentation can be found here.

How to call twitter API function within HTML and display results? – Twitter-api

I have a working function that, when used in the app.js file, will successfully open a twitter stream and display the content below(if console.log is used instead of print). However, when I take the function and put it in a script inside index.html, I get the error “referenceError: require not defined” I also get a GET error with the other scripts..perhaps I am referencing them incorrectly, but I’ve tried including them with only one .

I am trying to learn all this on my own. I have made a simply static website in the past, but only using html, css, and some basic jquery. I want to be able to stylize the text output by the function with 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>

Tags:

2

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    For just javascipt you can use fetchApi. It’s will provide same feel as AJAX does.

    For example :

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

    Thanks,

    Dinesh

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search