I am new to web development and I have bit off more than I can chew.
So far, I successfully have created a website to query the latest data at cosm.com
Now I am trying to save the last 10 data points from the cosm.com feed to an array using the cosm javascript library. I can't get the right syntax and I can't find examples to guide me.
cosm.feed.history( 12068, duration:'30seconds', callback(data) );
console.log(data);
http://jsfiddle.net/spuder/29cFT/12/
http://cosm.github.com/cosm-js/docs/
UPDATE 2013-4-14
After implementing #bjpirt's solution, I noticed I wasn't getting 'every' value returned inside the specified duration.
Solved it by adding "interval:0" to the request.
cosm.datastream.history( cosmFeed1, cosmDataStream1, {duration:'60seconds', interval:0}, getHistory );
http://jsfiddle.net/spuder/ft2MJ/1/
#lebreeze is correct with his advice. I got your JSFiddle working so that it is now fetching data from the Cosm API:
http://jsfiddle.net/nLt33/2/
I had to make a few changes to get it working, any of which would have been causing you errors:
The feed ID and datastream ID were incorrect
You didn't have a callback function
The options weren't in a javascript object
Also, that feed doesn't seem to have been updated recently.
Here's the updated code which seems to be working fine now:
//read only key
cosm.setKey("-Ux_JTwgP-8pje981acMa5811-mSAKxpR3VRUHRFQ3RBUT0g");
var cosmFeed = 120687;
var cosmDataStream = "sensor_reading";
$(document).ready( function() {
var success = function(data){
for(var datapoint in data.datapoints){
var dp = data.datapoints[datapoint];
$('#stuff').append('<li>Value: ' + dp.value + ' At: ' + dp.at + '</li>');
}
}
//Print out the last 10 readings or so
cosm.datastream.history( cosmFeed, cosmDataStream, {duration:'1day'}, success );
})
It's difficult to get just the last x datapoints (that's something we should change in the API I think) - what you'd normally do is ask for a specific time period.
Hope this helps.
You may need to wrap your duration:'30seconds' json options in {}
Try something like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://d23cj0cdvyoxg0.cloudfront.net/cosmjs-1.0.0.min.js"></script>
<script>..
cosm.setKey( "APIKEY" );
cosm.feed.history(40360, {duration:'30seconds'}, function(data){
console.log(data);
console.log(data.datastreams);
});
</script>
Related
I'm trying to display tweets coming from search tags and not by user, but couldn't get a result :(
http://jsfiddle.net/YS3u4/89/
Note: http://jsfiddle.net/YS3u4/90/ this doesn't work either.
var tag = "weather";
$.getJSON("https://twitter.com/search/tweets/" + tag + "?count=5&format=json&callback=?", function(data) {
$.each(data, function (index, item) {
$("<li/>").html(item.text).appendTo("#output");
});
});
The codes are fine. The problem is coming from Twitter's side. The sample link written in their API 1.1 documentation (the one that is searching for superbowl) is also throwing error.
i saw an example on how to load markers dynamically on this page
https://developers.google.com/maps/articles/phpsqlsearch_v3
and i saw another code igniter Google-maps api from BIOSTALL.
but this(http://biostall.com/codeigniter-google-maps-v3-api-library) library doesn't load the markers dynamically how can i achieve that using the library it self.
should i try to fetch the markers on map init or does the library provide a way to load these markers using ajax
Firstly, thanks for using my library. It's worth noting that the library is merely a way to simplify the generation of the Google Maps code. It constructs the JavaScript and HTML on your behalf making it quick and easy to add maps to your page.
There are a million and one ways that a developer might want to interact with the Google Maps API and it's impossible for the library to cater for every single instance. As a result, there are times where, in a bespoke situation like this, you may need to add your own code so it performs as you require.
As a result, might I suggest you simply add in the custom JS you require after you do echo $map['js']. There is a function available that comes with the library called createMarker() which, if you view the source code, you will see.
In pseudocode this will look like so:
<?php echo $map['js']; ?>
<script type="text/javascript">
// Get marker(s) with ajax
// Call createMarker() function to add marker(s) to map
</script>
I hope that helps somewhat.
Trying the pseudocode suggested by Biostall, this is what i have implemented:
$.ajax({
url: '*URL*',
type: "POST",
data: ({value : *value*}),
dataType: "json", //retrieved Markers Lat/lng in Json, thus using this dataType
success: function(data){
//Removing already Added Markers//////////
for(var i=0; i < markers.length; i++){
markers[i].setMap(null);
}
markers = new Array();
//////////////////////////////////////////
// Adding New Markers////////////////////
for (var i = 0, len = data.length; i < len; ++i) { // Iterating the Json Array
var d = data[i];
var lat = parseFloat(d.lattitude);
var lng = parseFloat(d.longitude);
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = {
map:map,
position:myLatlng // These are the minimal Options, you can add others too
};
createMarker(marker);
}
}
}
);
Note: If an array of Markers is being sent to this ajax call, it must be json encoded with the php function json_encode(). And thus you can use the dataType: "json" as mentioned in the ajax call parameters.
This worked for me, hope this might help.
I have created a script that long polls a JSON source and updates a div with the results. My code is posted below.
The code works fine and the data I request is grabbed and outputted correctly. The code checks the JSON and grabs 2 images and some text data.
The problem is it keeps refreshing the data and downloading the images constantly causing high server load and bandwidth consumption (obviously this is small right now but will increase as I complete my project). This also leads ot me not being able to select the text in the div and the images flicker as they are reloaded, both are undesirable consequences of my current code.
I want to be able to grab the data and display it, and not update it at all until the data actually changes in the JSON response, I am assuming I need to do something with a timestamp?. I have tried creating a lastupdate timestamp by using the first_aired key from the JSON but it is not working, I am unsure if I have made a mistake or if I am barking up the wrong tree.
Could someone take a look at the code I have and perhaps point me in the correct direction as to what I need to do?
var lastupdate = 0;
// call getData when the document has loaded
$(document).ready(function(){
getData(lastupdate);
});
var getData = function(lastupdate) {
$.ajax({
type: "GET",
url: 'http://api.trakt.tv/user/watching.json/apikey/user/lastupdate='+lastupdate+'&callback=?',
dataType: 'jsonp',
async: true,
cache: false,
// timeout after 5 minutes, shut process down and restart
timeout:300000,
// process a successful response
success: function(watching_now) {
if (!jQuery.isEmptyObject(watching_now)) {
//console.log(watching_now);
var airDate = watching_now.episode.first_aired;
var showTitle = watching_now.show.title;
var showPoster = watching_now.show.images.poster;
var showURL = watching_now.show.url;
var episodeTitle = watching_now.episode.title;
var episodeScreen = watching_now.episode.images.screen;
var episodeNumber = watching_now.episode.number;
var episodeSeason = watching_now.episode.season;
$('#watching-now').html('<div class="screencap"><img src="' + episodeScreen +' " width="240" height="150" /></div><div class="poster"><img src="' + showPoster +'" width="85" height="120" /></div><div class="watching-info">'+episodeSeason+'x'+episodeNumber+' - '+episodeTitle+'</div>')
}
else {
$('#watching-now').html('You are not currently watching anything')
}
// set lastupdate
lastupdate = watching_now.airDate;
// call again in 1 second
setTimeout('getData('+lastupdate+');', 1000);
},
// handle error
error: function(XMLHttpRequest, textStatus, errorThrown){
// try again in 10 seconds if there was a request error
setTimeout('getData('+lastupdate+');', 10000);
},
});
};
Here is the JSON I am getting the information form:
{"type":"episode","action":"watching","show":{"title":"Stargate Atlantis","year":2004,"url":"http://trakt.tv/show/stargate-atlantis","imdb_id":"tt0374455","tvdb_id":"70851","tvrage_id":"5324","first_aired":1089961200,"country":"United States","overview":"The story of Stargate Atlantis follows the cliffhanger episode on Stargate SG-1's seventh season finale \"Lost City\", where SG-1 found an outpost made by the race known as the Ancients in Antarctica. After the events of Stargate SG-1 season eight premiere \"New Order\", the Stargate Command sends an international team to investigate the outpost. Soon, Dr. Daniel Jackson discovers the location of the greatest city created by the Ancients, Atlantis. The story unfolds when the members of the expedition encounter the Wraith, the race that defeated the Ancients ten thousand years ago.","runtime":60,"network":"Syfy","air_day":"Monday","air_time":"9:00pm","certification":"TV-PG","images":{"poster":"http://trakt.us/images/posters/329.3.jpg","fanart":"http://trakt.us/images/fanart/329.3.jpg","banner":"http://trakt.us/images/banners/329.3.jpg"},"genres":["Action","Adventure","Science Fiction"]},"episode":{"season":3,"number":10,"title":"The Return (1)","overview":"The Atlantis expedition is stunned to learn that a ship full of Ancients is returning to reclaim their lost city. ","first_aired":1158908400,"url":"http://trakt.tv/show/stargate-atlantis/season/3/episode/10","images":{"screen":"http://trakt.us/images/episodes/329-3-10.3.jpg"}}}
If you need more information please just ask and I will provide everything I can.
Cheers
Take a look at example shown in link below.
http://www.zeitoun.net/articles/comet_and_php/start
what it does is pass time-stamp and get the record between current time-stamp and passed time-stamp.
I use nowjs and have an issue with sessions.
here is the code:
now.on('connect', function(){
if(this.user.session){
this.user.session.views++;
console.log(this.user.session.views);
}
});
app.get('/', function(req, res){
var body = '';
body = body+' <script src="/nowjs/now.js"></script>';
if (req.session.views) {
++req.session.views;
} else {
req.session.views = 1;
body += '<p>First time visiting? view this page in several browsers :)</p>';
}
res.send(body + '<p>viewed <strong>' + req.session.views + '</strong> times.</p>');
console.log("body");
});
no the problem is that I can write anything into "this.user.session" but on next call everything is erased. in my example it counts how many times you have entered the site. and "views" is increasing by one each time, but it should be increasing by 2 because I of "this.user.session.views++;". I'm missing something or it can't be done?
if you have some examples of nowjs+sessions post is please
thank you
I was using nowjs with sessions and Passport for authentication... I wrote a simple gist for making them work together ...
https://gist.github.com/2266544
What is the correct way of assigning to a variable the response from jQuery.get() ?
var data = jQuery.get("output.csv");
I was reading that jQuery.get() must have a callback function? why is that? and how would i use this callback function to assign the response back to the data variable?
Thanks in advance for your help and clarification.
Update:
Thank you all for your answers and explanations. I think i am starting to finally grasp what you are all saying.
My code below is doing the right thing only the first iteration of it.
The rest of the iterations its writing to the page undefined.
Am i missing something?
<tbody>
<table id="myTable">
<script type="text/javascript">
$.get('output.csv', function(data) {
csvFile = jQuery.csv()(data);
for ( var x = 0; x < csvFile.length; x++ ) {
str = "<tr>";
for ( var y = 0; y < csvFile.length; y++) {
str += "<td>" + csvFile[y][y] + "</td>";
}
str += "</tr>";
}
$('#myTable').append(str);
});
</script>
</tbody>
</table>
A callback function is required for asynchronous function calls, like an AJAX GET request. There is a delay between calling the get function and getting a response back, which could be a millisecond or several minutes, so you need to have a callback function that gets called when the asynchronous GET has completed its work.
Here's some more info on jQuery's AJAX get function: http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype.
From jQuery's examples:
// this would call the get function and just
// move on, doing nothing with the results
$.get("test.php");
// this would return the results of the get
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});
If you get undefined when you try to use the data variable in the callback function, open up the console in Firebug in Firefox and watch the get request. You can see the raw request and the response that it comes back with. You should get a better indication of the issue after seeing what's being sent to the server and what's being sent back to the client.
tsvanharen answered the question well, but DCrawmer's still missing the point. Let me attempt a clarification for him. I'm oversimplifying some of this, and smoothing over some details.
Look at the code shown below. This is pretty much the same code as tsvanharen's, except that I've replaced the anonymous function for the callback with an actual function pointer, and am a little more explicit so you can see what's going on:
var x = null;
function myCallback(data)
{
alert("Data Loaded:" + data);
}
$.get("test.php", myCallback);
// the rest of your code
alert("The value of X is: " + x);
Assuming that test.php takes even a moment or two to load, notice the order that the alerts probably come up in:
1. "The value of X is"
2. "Data Loaded"
The function $.get() runs instantaneously. JavaScript moves on and runs the rest of your code right away. In the background, it's retrieving your page at test.php. jQuery hides some of the messy details of this.
The callback function (the second argument to $.get()) runs later (asynchronously). Or, said another way, the function myCallback is a handler to an event. That event is "$.get() has finished retrieving the data". It doesn't get run until that point. It doesn't run when $.get() runs! $.get() just remembers where that function is for later.
The function myCallback may run milliseconds or minutes later, long after $.get() has been dealt with.
If myCallback doesn't run until minutes later, then what's the value of x when the "The value of X" code is run? It's still null. There's your bug.
To use the data retrieved from the page in your script, you have to do things more like this:
Start your script, declare your variable to hold the data.
Call $.get(), with a callback function to handle the return.
Do nothing else. [Or, at least, nothing that requires the data]
Let the page just sit there.
...sometime in the future...
X. Your callback function will get run, and have the results of your web page.
Your callback function can:
* Display the data
* Assign that data to a variable
* Call other functions
* Go along it's merry way.
Actually in your example the data will be the XMLHttpRequest request object.
var x;
$.get( 'output.csv', function(data){
x = data;
console.log(x); // will give you the contents.
});
I really struggled with getting the results of jQuery ajax into my variables at the "document.ready" stage of events.
jQuery's ajax would load into my variables when a user triggered an "onchange" event of a select box after the page had already loaded, but the data would not feed the variables when the page first loaded.
I tried many, many, many different methods, but in the end, the answer I needed was at this stackoverflow page: JQuery - Storing ajax response into global variable
Thanks to contributor Charles Guilbert, I am able to get data into my variables, even when my page first loads.
Here's an example of the working script:
jQuery.extend
(
{
getValues: function(url)
{
var result = null;
$.ajax(
{
url: url,
type: 'get',
dataType: 'html',
async: false,
cache: false,
success: function(data)
{
result = data;
}
});
return result;
}
}
);
// Option List 1, when "Cats" is selected elsewhere
optList1_Cats += $.getValues("/MyData.aspx?iListNum=1&sVal=cats");
// Option List 1, when "Dogs" is selected elsewhere
optList1_Dogs += $.getValues("/MyData.aspx?iListNum=1&sVal=dogs");
// Option List 2, when "Cats" is selected elsewhere
optList2_Cats += $.getValues("/MyData.aspx?iListNum=2&sVal=cats");
// Option List 2, when "Dogs" is selected elsewhere
optList2_Dogs += $.getValues("/MyData.aspx?iListNum=2&sVal=dogs");
You just need to specify the callback function in the parameter to get method. Your data will be in the variable you specify in the function.
$.get("output.csv", function(data) {
// Put your function code here, the 'data' variable will hold your data.
});