extract and log a value from JSON data using jquery - javascript

I have searched and searched but being unsure how to phrase my queries I have been unable to achieve what i believe is a simple goal.
I have an RSS feed from Deviant Art that is run through Yahoo Pipes
this is the pipe"
http://pipes.yahoo.com/pipes/pipe.info?_id=63478be58fb00758ded9d5108170f931
the JSON the pipe produces
http://pipes.yahoo.com/pipes/pipe.run?_id=63478be58fb00758ded9d5108170f931&_render=json
looks like this:
{"url":"http:\/\/darksilverflame.deviantart.com","content":"Copyright 2012 *DarkSilverflame","description":null,"title":null},........
What I am trying to achieve is a simple way of parsing the data via jquery(or just JS) and then generating a simple txt list of usernames from the Deviant Art and the links to those users pages.

You can use :
jQuery.parseJSON( json ) Link to jQuery Documentaion
parsedObject =jQuery.parseJSON( '{"url":"http:\/\/darksilverflame.deviantart.com","content":"Copyright 2012 *DarkSilverflame","description":null,"title":null}');
or form Chrome (F12 -> Console then test the folowing)
a = JSON.parse('{"url":"http:\/\/darksilverflame.deviantart.com","content":"Copyright 2012 *DarkSilverflame","description":null,"title":null}');
I hope that helps.

To further on Mehdi's answer: if you are looking for a simple way to retrieve and process the data in one step, you can start with the usual incantation:
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=63478be58fb00758ded9d5108170f931&_render=json',
function(data){
$.each(data.items, function(i, item) {
// do something here
}
}
);
http://docs.jquery.com/Ajax/jQuery.getJSON

Related

Converting JSON Data to String

Edit: This first paragraph got cut off somehow during posting
I am a retired farmer not a coder. I do dabble with html/js but am very far from competent at either. What I am working on is modifying the html interface for my weather station. It is for my own in house use only. The JSON I am trying to use is hosted by the weather station software on an Raspberry pi on the URL listed a couple paragraphs down.
I will just post what I'm trying to do rather than anything about what I have tried. The following code produces what I want - being able to add a temperature to an html page using the tag "extratemp". It also truncates the sample temp from 69.0 to 69.
The sample data is actually contained in a JSON on the host computer (../api/extra/temp.json). Again, my html page displays the desired "69" using the code below, I just cannot seem to replace the sample data (var str = line) with the live data from the JSON.
$(document).ready(function() {
var str = '{"data":[["Sensor 1","69.0","°F"],["Sensor 2","0.0","°F"],["Sensor 3","0.0","°F"],["Sensor 4","0.0","°F"],["Sensor 5","0.0","°F"],["Sensor 6","0.0","°F"],["Sensor 7","0.0","°F"],["Sensor 8","0.0","°F"],["Sensor 9","0.0","°F"],["Sensor 10","0.0","°F"]]}'
var jsonData = JSON.parse(str);
document.getElementById("extratemp").textContent = Math.floor(jsonData.data[0][1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="extratemp"></div>
Any help will be greately appreciated.
Thanks
You can use jQuery's getJSON function to download the JSON file & handle it by means a callback function:
$.getJSON( "../api/extra/temp.json", function( data ) { ... });
According with your data, the JSON object is an array of arrays, each item of the main array containig 3 values:
[ ["Sensor 1", "69.0", "°F"], [...], ...]
Once again using jQuery library you can use the $each function to iterate thorugh each item of the main array, then accessing any particular subitem by index (0,1,2).
$.each(data, function( index, item ) {
console.log("Item =>", {item[0], item[1], item[2]} );
});
See: https://api.jquery.com/jquery.getjson/, http://api.jquery.com/jquery.each/

Simple web GUI to capture user data

I need to develop a simple web page that accepts user information( name, age, birthdate, etc) and saves the data to a CSV or a text file to the server. I currently use Google sheets, but I need something that's more customizable and something that does some simple error checking. Are there any open source frameworks out there that I can use to put something together in a couple hours? I have a mechanical engineering background, and I'm not too familiar with web technologies. Any pointers will be greatly appreciated.
jQuery
JavaScript:
function saveUserData(url, data) {
var csv = [], // the array of values
del = "="; // the "delimiter" or "separator"
function handle(string) {
return encodeURI(string)
.replace(/,/g, "%2c");
}
for(var property in data)
csv.push(property + del + handle(data[property]));
// "name=John Doe,dob=Jan 1%2c 2000"
$.post(url, {data: csv.toString()})
.done(function(returned_data) {
// if you need this later
}, "json");
// "url" the the url to send the data to
// "data:" will likely be determined by the server you're using
// "json" will make "returned_data" a JSON object (if the server supports it)
}
Tesla88,
In your case, you need to write a server-side script. Below are 3 links that will show you how to
open, write, and close a file.
That's how far as I would elaborate on my answer, you need to show us that you actually did the work, and if you ran into issues, you can ask here again.
I hope the above helps.
-Anthony

How to query JSON with JS API to return JSON properties?

Apologies if this seems basic to some, but I'm new to JS/node.js/JSON and still finding my way. I've searched this forum for an hour but cannot find a specific solution.
I have a basic website setup running of a local Node.js server along with 2x JSON data files with information about 32x local suburbs.
An example of an API GET request URL on the site would be:
.../api/b?field=HECTARES
The structure of the JSON files are like:
JSON Structure
In the JSON file there are 32x Features (suburbs), each with it's own list of Properties as shown above. What I am trying to do is use the API 'field' query to push all the HECTARES values each of the 32x Features into a single output variable. The code below is an example of how far I have got:
var fieldStats = [];
var fieldQ = req.query['field'];
for (i in suburbs.features) {
x = suburbs.features[i].properties.HECTARES;
fieldStats.push(x);
}
As you can see in the above "HECTARES" is hard-coded - I need to be able to pass the 'fieldQ' variable to this code but have no idea how to.
Advice appreciated!
Exactly the same syntax you are using just above:
suburbs.features[i].properties[fieldQ];

Get Twitter Feed as JSON without authentication

I wrote a small JavaScript a couple of years ago that grabbed a users (mine) most recent tweet and then parsed it out for display including links, date etc.
It used this json call to retrieve the tweets and it no longer works.
http://twitter.com/statuses/user_timeline/radfan.json
It now returns the error:
{"errors":[{"message":"Sorry, that page does not exist","code":34}]}
I have looked at using the api version (code below) but this requires authentication which I would rather avoid having to do as it is just to display my latest tweet on my website which is public anyway on my profile page:
http://api.twitter.com/1/statuses/radfan.json
I haven't kept up with Twitter's API changes as I no longer really work with it, is there a way round this problem or is it no longer possible?
Previously the Search API was the only Twitter API that didn't require some form of OAuth. Now it does require auth.
Twitter's Search API is acquired from a third party acquisition - they rarely support it and are seemingly unenthused that it even exists. On top of that, there are many limitations to the payload, including but not limited to a severely reduced set of key:value pairs in the JSON or XML file you get back.
When I heard this, I was shocked. I spent a LONG time figuring out how to use the least amount of code to do a simple GET request (like displaying a timeline).
I decided to go the OAuth route to be able to ensure a relevant payload. You need a server-side language to do this. JavaScript is visible to end users, and thus it's a bad idea to include the necessary keys and secrets in a .js file.
I didn't want to use a big library so the answer for me was PHP and help from #Rivers' answer here. The answer below it by #lackovic10 describes how to include queries in your authentication.
I hope this helps others save time thinking about how to go about using Twitter's API with the new OAuth requirement.
You can access and scrape Twitter via advanced search without being logged in:
https://twitter.com/search-advanced
GET request
When performing a basic search request you get:
https://twitter.com/search?q=Babylon%205&src=typd
q (our query encoded)
src (assumed to be the source of the query, i.e. typed)
by default, Twitter returns top 25 results, but if you click on
all you can get the realtime tweets:
https://twitter.com/search?f=realtime&q=Babylon%205&src=typd
JSON contents
More Tweets are loaded on the page via AJAX:
https://twitter.com/i/search/timeline?f=realtime&q=Babylon%205&src=typd&include_available_features=1&include_entities=1&last_note_ts=85&max_position=TWEET-553069642609344512-553159310448918528-BD1UO2FFu9QAAAAAAAAETAAAAAcAAAASAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Use max_position to request the next tweets
The following json array returns all you need to scrape the contents:
https://twitter.com/i/search/timeline?f=realtime&q=Babylon%205&src=typd
has_more_items (bool)
items_html (html)
max_position (key)
refresh_cursor (key)
DOM elements
Here comes a list of DOM elements you can use to extract
The authors twitter handle
div.original-tweet[data-tweet-id]
The name of the author
div.original-tweet[data-name]
The user ID of the author
div.original-tweet[data-user-id]
Timestamp of the post
span._timestamp[data-time]
Timestamp of the post in ms
span._timestamp[data-time-ms]
Text of Tweet
p.tweet-text
Number of Retweets
span.ProfileTweet-action–retweet > span.ProfileTweet-actionCount[data-tweet-stat-count]
Number of Favo
span.ProfileTweet-action–favorite > span.ProfileTweet-actionCount[data-tweet-stat-count]
Resources
https://code.recuweb.com/2015/scraping-tweets-directly-from-twitter-without-authentication/
If you're still looking for unauthenticated tweets in JSON, this should work:
https://github.com/cosmocatalano/tweet-2-json
As you can see in the documentation, using the REST API you'll need OAuth Tokens in order to do this. Luckily, we can use the Search (which doesn't use OAuth) and use the from:[USERNAME] operator
Example:
http://search.twitter.com/search.json?q=from:marcofolio
Will give you a JSON object with tweets from that user, where
object.results[0]
will give you the last tweet.
Here is a quick hack (really a hack, should be used with caution as its not future proof) which uses http://anyorigin.com to scrape twitter site for the latest tweets.
http://codepen.io/JonOlick/pen/XJaXBd
It works by using anyorigin (you have to pay to use it) to grab the HTML. It then parses the HTML using jquery to extract out the relevant tweets.
Tweets on the mobile site use a div with the class .tweet-text, so this is pretty painless.
The relevant code looks like this:
$.getJSON('http://anyorigin.com/get?url=mobile.twitter.com/JonOlick&callback=?', function(data){
// Remap ... utf8 encoding to ascii.
var bar = data.contents;
bar = bar.replace(/…/g, '...');
var el = $( '<div></div>' );
el.html(bar);
// Change all links to point back at twitter
$('.twitter-atreply', el).each(function(i){
$(this).attr('href', "https://twitter.com" + $(this).attr('href'))
});
// For all tweets
$('.tweet-text', el).each(function(i){
// We only care about the first 4 tweets
if(i < 4) {
var foo = $(this).html();
$('#test').html($('#test').html() + "<div class=ProfileTweet><div class=ProfileTweet-contents>" + foo + "</div></div><br>");
}
});
});
You can use a Twitter API wrapper, such as TweetJS.com which offers a limited set of the Twitter API's functionality, but does not require authentication. It's called like this;
TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
function (data) {
console.log(data);
});
You can use the twitter api v1 to take the tweets without using OAuth. For example: this link turns #jack's last 100 tweets.
The timeline documentation is here.
The method "GET statuses/user_timeline" need a user Authentification like you can see on the official documentation :
You can use the search method "GET search" wich not require authentification.
You have a code for starting here : http://jsfiddle.net/73L4c/6/
function searchTwitter(query) {
$.ajax({
url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
dataType: 'jsonp',
success: function(data) {
var tweets = $('#tweets');
tweets.html('');
for (res in data['results']) {
tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
}
}
});
}
$(document).ready(function() {
$('#submit').click(function() {
var params = {
q: $('#query').val(),
rpp: 5
};
// alert(jQuery.param(params));
searchTwitter(params);
});
})

Alexa Pagerank using jquery getJSON

I am trying to get the alexa pagerank via http://data.alexa.com/data?cli=10&data=snbamz&url= + weburl
Here is the url for getting the alexa rank of facebook.com
http://data.alexa.com/data?cli=10&data=snbamz&url=http://www.facebook.com
If you copy the link above and paste in your browser you can see that it is in xml format.
I am jusing getJSON to retrieve the alexa rank from other domain. I am also using yql api. you can see the url in the first parameter below.
var url = "http://data.alexa.com/data?cli=10&data=snbamz&url="+ inputtedURL;
OR to be specific
var url = "http://data.alexa.com/data?cli=10&data=snbamz&url=www.facebook.com";
Below is my getjsON
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=xml'&callback=?",
function(data){
}
);
How will I get the contents of this http://data.alexa.com/data?cli=10&data=snbamz&url=http://www.facebook.com since this is in xml format. the getJSON returns JSON objects.
Any other suggestions?? I am building an alexa page rank checker using jquery only .
I see I'm a bit late to the party, but I had to solve this today and thought somebody might find it useful: You can use Yahoo Pipes to convert XML data to JSON.
I created an example Pipe that take a 'site' parameter, passes it to Alexa's API, and returns the result. You can simply add '_render=json' to the query and get the results back in JSON. So using jquery...
var pipe = "http://pipes.yahoo.com/pipes/pipe.run?";
pipe += "_id=c43fc0ed13fc8945cf438da90bff0121";
pipe += "&site=" + encodeURIComponent(url);
pipe += "&_render=json&callback=?";
$.getJSON(pipe,
function(data){
}
);
(Feel free to clone the Pipe and do with it as you will.)
Here's an example call to get Alexa stats for StackOverflow in JSON:
http://pipes.yahoo.com/pipes/pipe.run&_id=c43fc0ed13fc8945cf438da90bff0121&_render=json&site=http://stackoverflow.com
The prettified output looks like this:
{"count":1,"value":{
"title":"AlexaData",
"description":"Pipes Output",
"link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=c43fc0ed13fc8945cf438da90bff0121",
"pubDate":"Wed, 09 Jan 2013 21:50:25 +0000",
"generator":"http:\/\/pipes.yahoo.com\/pipes\/",
"callback":"",
"items":[{
"AID":"=","HOME":"0","URL":"stackoverflow.com\/","VER":"0.9",
"DMOZ":{
"SITE":{
"BASE":"stackoverflow.com\/",
"DESC":"A language-independent collaboratively edited question and answer site for programmers. Questions and answers displayed by user votes and tags.",
"TITLE":"Stack Overflow",
"CATS":{
"CAT":[
{"CID":"377304","ID":"Top\/Computers\/Programming\/Resources\/Chats_and_Forums","TITLE":"Resources\/Chats and Forums"},
{"CID":"477752","ID":"Top\/Reference\/Ask_an_Expert\/Computers_and_Technology","TITLE":"Ask an Expert\/Computers and Technology"}
]
}
}
},
"SD":{
"POPULARITY":{"SOURCE":"panel","TEXT":"86","URL":"stackoverflow.com\/"},
"REACH":{"RANK":"81"},"RANK":{"DELTA":"-3"},
"COUNTRY":{"CODE":"IN","NAME":"India","RANK":"25"}},
"description":null,
"title":null
}
]}
}

Categories