I'm trying to fetch some text from http://www.ikea.com/us/en/catalog/products/10176292
using jsonp.
To test if it works this is what I did
$.getJSON("http://www.ikea.com/us/en/catalog/products/10176292?format=json&jsoncallback=?",function(data) {
$('h1').text(data.modified);
});
This doesn't work so it's probably no valid but all the jsonp documentation I've found on google use either twitter or flickr API as examples. I'm pretty sure IKEA doesn't have an API so those methods don't really help me.
However this does work and returns text from flickr
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?",function(data) {
$('h1').text(data.title);
});
I'm attempting this because I saw this example http://www.foxycart.com/whos-using-foxy/case-studies/modernash and it appears to work with jsonp fetching text data from ikea. I don't need anything as complex, just to be able to retrieve some simple text.
Can someone please point me in the proper direction or give some tips.
Thanks
The link to Ikea isn't JSON so you can't pull from it. It looks like Ikea doesn't have a public API. So, you won't be able to get any data from them to use.
For Flickr you are on the right track. Here is how you can do it.
$.ajax({
dataType: 'jsonp',
url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?',
success: function(data){
console.log(data);
}
});
If you want to get the title you would do data.title and so on.
You can supplement your getJSON with ajax (see official docs here - http://api.jquery.com/jQuery.getJSON/), then it is super easy to declare JSONP.
$.ajax({
dataType: "jsonp",
url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?',
data: data,
success: function( data ) {
$('h1').text(data.modified);
});
Edit: #Matt Ball is right. Before you use something like the ajax call above you need to make sure that the URL that you are using is returning actual json. You should be able to navigate to the desired URL and see the raw JSON. Then all the above function will do is fetch and parse accordingly.
It looks to me like they are just scraping data from the site. All the product information is stored in the html and they are adding that to an object into their own cart.
Since the you drag the image to their bookmarklet I looked at the data stored in the image # http://www.ikea.com/us/en/catalog/products/20011408/#/80193735 :
<img id="productImg" src="/us/en/images/products/lack-side-table__0115088_PE268302_S4.JPG" border="0" alt="LACK Side table IKEA The high-gloss surfaces reflect light and give a vibrant look. Easy to assemble. Low weight; easy to move." title="LACK Side table - high gloss red, 21 5/8x21 5/8 " - IKEA" width="500" height="500" class="mn_global_shadow ui-draggable" style="width: 244px; display: inline-block; height: 244px; left: 0px; top: 0px;">
In the title we get the name, finish, color, and size.
The price and quantity are held in id's/classes which seem standard across the entire site.
How it all works beyond that I haven't looked at, but it doesn't seem too complex.
Hope this helps.
You probably need to provide some custom headers. Wireshark is your friend
Related
I am using the jQuery photowall plugin that can be found at http://creotiv.github.io/jquery-photowall/ .
Please view this to see descriptions and code. I am having some issues with long load times due to the large amount of photos that are in the Picassa web album it pulls from. To fix this issue I would like to be able to set a variable that could limit the number of photos pulled to x amount. If anyone could enlighten me on how this could be done I would appreciate it!
You can see the photowall implemented on a project of mine located here. http://hybridfuzionblackop.com/photos.html
Thanks!
In your http request to the Picasa API, you can specify a max-results parameter. This is an example from their reference. I added the max-results parameter to the URL:
$.ajax({
url: 'https://picasaweb.google.com/data/feed/api/user/118283508237214694671/albumid/5685978516288199793'
+'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:'
+'content))&imgmax=720&max-results=10',
...
});
(Note that I omitted the additional parameters).
I test it something like that:
$.ajax({
url: 'https://picasaweb.google.com/data/feed/api/user/118283508237214694671/albumid/5685978516288199793'
+'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:'
+'content))&imgmax=720',
dataType: 'jsonp',
success: function(data){
var data2 = data.feed.entry.splice(0,10)
console.log(data2);
}
});
This is shorter version of example. data is a json object which have entries for all images served from picassa. I used splice to get only first 10 images but after download json data from picassa server.
It's better download 1000 json objects than 1000 images.
I'm trying to use the API from https://developer.forecast.io and I'm getting a JSON response, this is the first time I'm using an API and all I really need to know is, how do I assign the JSON response I get back from their API to elements on my page. Thanks!
This is done with a script-tag in my header:
script(src='https://api.forecast.io/forecast/APIKEY/LAT,LON')
http://api.jquery.com/jQuery.ajax/ you need to add a success callback, at the bottom of that page are examples you can look at.
EDIT
ok i saw that you are using a script tag with the request, since the api is outside your current domain you need to make a JSONP request
$(document).ready(function(){
$.ajax({
url: 'https://api.forecast.io/forecast/APIKEY/LAT,LON',
dataType: 'jsonp',
success: function(data){
//do whatever you want with the data here
$("body").append(JSON.stringify(data));
}
});
});
off course you need to make some tweaks to that piece of block but you get the idea
What you're looking for is DOM manipulation. DOM is the HTML Document Object Model, an object representation of the HTML comprising a document. There are a lot of ways to go about this, but one of the more popular Javascript libraries for performing this task is jQuery. See their help documentation category on manipulation for more information.
OK, based on your clarification, you're not yet using AJAX. I say "not yet", because you're going to need to. Again, I'll recommend jQuery for that, and their own documentation as the best resource. For a simple "get", your easiest option is the getJSON method.
So, at a very simple level you might do something like:
$(function(){
$.getJSON('url_to_api', function(data) {
$("#SummaryBox").append("<div>" + data.hourly.summary + "</div>");
}
});
what I need to do is read the content of a "public" google spreadsheet (by public I mean that I saved the sheet clicking on "File > Publish to the web", so it's accessible without the need to be logged in into a google account), and, why not, write something into it too.
googlin' around, I found that I can access the sheet and get the xml equivalent of the sheet content with something like
https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values
It works great if I load that url into a browser. But I need to find a "javascript-way" to get and handle the returned value, ie the xml (or json, but xml would be preferable).
I tried to use an ajax call, but I think there's something messy with the protocol.. I can't get the server response correctly.
$.ajax({
type: "GET",
url: "https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values",
success: function(data){alert("yeah");},
error: function(){alert("fail..");},
dataType:"xml",
});
I also tried to get the json instead of xml, adding "?alt=json" to the url and changing the datatype, but I still have the problem..
Any idea / suggestion?
Thanks in advance, best regards
You need to request with a JSONP call and you need to specifiy a callback - method. This can be done in jQuery using:
var url = 'https://spreadsheets.google.com/feeds/list/<CODE>/od6/public/values?alt=json-in-script&callback=?';
jQuery.getJSON(url).success(function(data) {
console.log(data);
}).error(function(message) {
console.error('error' + message);
}).complete(function() {
console.log('completed!');
});
Documentation and samples for google spreedsheets .
I'm having issues gathering data using JSON on the Songkick API. I'm really new to jQuery and Javascript so please forgive me if this looks really crude. I've spent some time trying to research the proper syntax I need but I just keep ending back up at square one.
What im trying to do is make the request using jQuery and then add the results into my HTML in an list. Any help anyone can give me would be fantastic.
Here's what I have so far.
<script>
$.getJSON("http://api.songkick.com/api/3.0/artists/3950031/calendar.json?apikey={apikey}",
function(data){
var events = data['resultsPage']['results']['event'];
for (var i=0;i < events.length; i++) {
$("#events").append('<li>'+events[i]['displayName']+'</li>');
}
});
</script>
Thanks!
sorry i took so long to get back, i left the office about the time you replied last night
here is what I came up with:
$(document).ready(function() {
$.ajax({
url: "http://api.songkick.com/api/3.0/artists/480448/calendar.json?apikey=APIKEY&jsoncallback=?",
dataType: "jsonp", // <== JSON-P request
success: function(data){
$.each(data["resultsPage"]["results"]["event"], function(i, entry){
$("#events").append('<li>'+entry.displayName +'</li>');
});
}
});
});
I think the issue you were having was with JSON, JSON is subject to the same origin policy (which I read about on here ( $.getJSON not working ). Instead you have to use JSON-P adding
&jsoncallback=?
at the end of the URL tells Songkick to send it as a JSON-P request. This was the main issue.
Other issues included minor coding errors: there was an extra ( in your append string, I also used $.Each as appose to a for loop but either would work, hope this helps and you may want to take your API code off if the fix worked :) Just change API Key to your key and it should be fine (i also changed the band to chevelle as the other one had no entries)
I'm trying to read Tumblr informations via the JSON API (and recuperate the total numbers of post for a blog)
My JS code looks like this:
$.getJSON("http://demo.tumblr.com/api/read/json?callback=?", function(json) {
$('.counter').html(json.posts-total);
});
but doesn't work.
Try:
$.getJSON("http://demo.tumblr.com/api/read/json?callback=?", function(json) {
$('.counter').text(json["posts-total"]);
});
Since - is an operator, JavaScript would otherwise try to subtract total from json.posts.
You can see this working in this JSFiddle
not worked with tumblr but an easier way to use jQuery to get json data is
$.get( "http://demo.tumblr.com/api/read/json", {callback:"?"}, function(data){
alert( data.posts-total )
}, "json");
maybe a different approch will help, also the console of firebug is very valiuable in seeing why an ajax request hasn't worked. Maybe check that too firebug->console
if none of this helps shoot back a little more info and will see what else can be a miss..