I am working on a task to learn how to use JSON. I am trying to link to spotify's API via a search, get an artists albums and show them on the webpage. I am a beginner and do not know what I am missing in the data / callback function to create the correct html to show on my page. If anyone has time to point me in the right direction, it would be appreciated.
$(document).ready(function() {
// Creating the AJAX Request
//
$('#search').submit(function(event) {
// Stop the form from submitting
event.preventDefault();
// Get The value from the form
var SpotifyURL = "https://api.spotify.com/v1/searchjsoncallback=?";
var artist = $('#search').val();
var artistOptions = {
"type" : "album",
"q" : "artisit"
};
function displayAlbums(data) {
var albumHTML = '<ul>';
$.each(data.items,function(i, album) {
albumHTML += '<li class="albumInformation">';
albumHTML += '<></li>';
}); // end each
albumHTML += '</ul>';
$('#albums').html( albumHTML);
}
$.getJSON(SpotifyURL, artistOptions, displayAlbums );// end getJSON
}); // end submit function
}); // Closing Ready function
Related
I need to show images in another window. I have 2 HTMLs files:
The parent HTML has a button in HTML loading pic data dynamically from a JSON object, after looping on it:
//JASON object loop to generate a button to open each picture in a table
tabCell.innerHTML += 'value="Open picture" onclick="OpenPopup('+myBooks[[col[j]]+')" />';
In script part:
// open the popup and send the picture base64 image
var popup;
function OpenPopup(picData) {
popup = window.open("base64popup.html?picData="+picData, "Popup", "width=300,height=100");
SendToPopup(picData);
};
function SendToPopup(picData) {
if (popup != null && !popup.closed) {
popup.focus();
} else {
alert("Popup has been closed.");
}
}
//this is the popup html file
The popup page:
<html>
<script type="text/javascript">
//on load it receive the request param
window.onload = function loadPic(){
var pictureSource = getParameterByName('picData');
var divContainer = document.getElementById("approval_report");
//it adds the data in HTML to show it with encoding
divContainer.innerHTML +='<img src=data:image/jpeg;base64,'"'+pictureSource+'"/>';
};
//function to get param
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
</script>
<body>
<div id="approval_report" />
</body>
</html>
This result is displaying only the first part of the image.
Any idea how to show it all?
I can change the idea of the popup also, i need to show this picture in another section then the main table.
I am trying to fetch data from the static json file but the data is not getting displayed at all. What could be the possible reason for it.
Below is my code:
var Collection = Backbone.Collection.extend({
url: "names_of_people.json",
initialize: function() {
this.fetch();
}
});
collections = new Collection();
console.log("the length "+collections.length);
for (i=1;i<collections.length;i++)
{
console.log("done "+ collections.at(i).get("name"));
}
The problem is that this code:
console.log("the length "+collections.length);
for (i=1;i<collections.length;i++)
{
console.log("done "+ collections.at(i).get("name"));
}
ends up being executed before this.fetch() has completed. You'll need to either put your code in this.fetch's success callback, like this:
var Collection = Backbone.Collection.extend({
url: '/data.json',
initialize: function() {
this.fetch({
success: function() {
console.log(collections, 'the length ' + collections.length);
for (var i = 0; i < collections.length; i++) {
console.log('done ' + collections.at(i).get('name'));
}
}
});
}
});
var collections = new Collection();
or by listening to the collection's sync event, which occurs when this.fetch has completed successfully. This pattern is more commonly used in Backbone applications.
var Collection = Backbone.Collection.extend({
url: '/data.json',
initialize: function() {
this.listenTo(this, 'sync', this.syncExample);
this.fetch();
},
syncExample: function() {
console.log(collections, 'the length ' + collections.length);
for (var i = 0; i < collections.length; i++) {
console.log('done ' + collections.at(i).get('name'));
}
}
});
var collections = new Collection();
You can read more about Backbone's event system and the listenTo function here.
check backbone parse function. after fetch it will also call vlidate and parse if they exist.
EDIT: more detail
The key thing here I think is, the fetch() is asynchronous, so by the time you start loop, the data is not here yet. So you need to execute the code when you are sure the collection is ready. I usually listen to a "reset" event, and let the fetch to fire a reset event by collection.fetch({reset:true}).
Backbone Collection, whenever fetch, and get an array of data from server in a format
[obj1,obj2],
it will pass each of these into a parse function, described here
For debug purpose you can simply do:
var MyCollection=Backbone.Collection.extend({
parse:function(response){
console.log(response);
return response;
}
})
This can check if the fetch indeed get the json.
On a side note, it is always a good practise to fetch it after you initialized the collection, means you don't put the this.fetch() inside initialize(), you do this outside.
for example, if you want to print out all the element name, you can do
var c=MyCollection();
c.fetch({reset:true}); // this will fire 'reset' event after fetch
c.on('reset',printstuff());
function printstuff(){
_.forEach(c,function(e){
console.log(e.get('name'));
});
}
Note this 'reset' event fires after all the collection is set, means it is after the parse() function. Apart from this parse(), there is also a validate function that is called by model. You collection must have a model parameter, you can make your own model, and give it a validate(), it also print out stuff.
Hy everybody,
I'm working with dc.js and I think it's a genious tool ! However I have a issue I can't solve.
I'm using a dc.barchart and I want to launch a function of mine after a click on one bar, but I need to wait the end of the redraw of the barchart.
Order :
- my barchart is displayed
- I click on one bar
-> the barchart is redraw
-> only after the complete redraw, my function is launched
Where can I put my callback ? I can't find the corresponding code.
_chart.onClick = function (d) {
var filter = _chart.keyAccessor()(d);
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
alert("here is not working");
});
};
(...)
dc.redrawAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].redraw();
}
alert("neither here");
if(dc._renderlet !== null)
dc._renderlet(group);
};
dc.events.trigger = function(closure, delay) {
if (!delay){
closure();
alert("neither neither here");
return;
}
dc.events.current = closure;
setTimeout(function() {
if (closure == dc.events.current)
closure();
}, delay);
};
Any idea ? I'm completely blocked right now :(
Thanks a lot for your help,
vanessa
If _chart is the name of your chart and you want to execute some function named my_function after finishing drawing, use the following piece of code after the declaration of the chart itself:
_chart.on("postRedraw", my_function);
Hope this is what you were looking for.
I do not know where to define the context (JSON object) in a Handlebars.registerHelper function in a Backbone View.
I am able to render my helper function data in the console when I access it through $.getJSON, but I cannot get the data from the helper function into my template:
var SurveyView = Backbone.View.extend({
template: Handlebars.compile(
'<ul>' +
'{{#each models}}<h3>{{attributes.name}}</h3><h4>{{attributes.question}}</h4>'+
'<li>{{#answerList info}} {{{answers}}}{{/answerList}}</li>{{/each}}' +
'</ul>' +
'<button type="button" class="btn btn-danger">Next</button>' +
),
helperOne: function() {
Handlebars.registerHelper('answerList', function(context, options) {
var output = "";
$.getJSON('questions', function(info) {
for (var i = 0; i<info.length; i++ ){
var infos = info[i];
for (key in infos.answers) {
if(infos.answers.hasOwnProperty(key)) {
output += '<li>' +
'">' + info[i].answers[key] +
'</li>';
console.log(output);
}
}
}
});
return output;
}); //end register
},
initialize: function() {
this.listenTo(this.collection, "reset", this.render);
},
render: function () {
this.helperOne();
this.$el.html(this.template(this.collection));
return this;
}
});
Trying to do an AJAX call inside a Handlebars helper isn't a very productive thing to do. The helper only knows about text: the helper returns a piece of text that will probably become a set of DOM nodes but there is no way for the helper to know what the DOM nodes are so it can't update anything on the page when the AJAX call returns from the server.
You need to turn your logic around:
Figure out what AJAX calls need to be made.
Perform the AJAX calls.
When all the AJAX calls have finished, collect up the data for the template and hand it to the compiled template function.
Add the template function's return value to the DOM.
In your case, you can get rid of helperOne completely. Then, presumably you'd have an Answer Backbone model and an AnswerList collection which contains Answers. Somewhere you'd do a fetch on the AnswerList and when that returns, you can update your view.
i have a problem with the Geolocation API -.-'
I'm using the FirefoxOS Boilerplate App (https://github.com/robnyman/Firefox-OS-Boilerplate-App) for create a simple html5 app.
The problem is simple: I would like the data (lat/lon) obtained from the API are returned by a function as an array.
All the examples that i have found uses the data on the fly for show the maps or insert in a div (as also this boilerplate).
navigator.geolocation.getCurrentPosition(function (position) {
geolocationDisplay.innerHTML = "<strong>Latitude:</strong> " + position.coords.latitude + ", <strong>Longitude:</strong> " + position.coords.longitude;
geolocationDisplay.style.display = "block";
},
function (position) {
geolocationDisplay.innerHTML = "Failed to get your current location";
geolocationDisplay.style.display = "block";
});
This is the code of the boilerplate for the Geolocation...
I would want a function like get_location that return me the data, but after days of testing/google search I gave up and I ask you who are more experienced with callback/scope in Javascript of me.
The opntions that i have evaluated it's save the data in a hidden div or save with localstorage/cookies.
Thanks for the help!
EDIT 20/11:
function load_location() {
navigator.geolocation.getCurrentPosition(save_location, handleLocationError, {maximumAge: 0, timeout: 1000, enableHighAccuracy: true});
}
function handleLocationError(error) {
alert(error.code + ' - ' + error.message);
}
function save_location(position) {
localStorage.clear();
ls_save('latitude',position.coords.latitude);
ls_save('longitude',position.coords.longitude);
ls_save('accuracy',position.coords.accuracy);
ls_save('altitude',position.coords.altitude);
ls_save('altitudeAccuracy',position.coords.altitudeAccuracy);
ls_save('heading',position.coords.heading);
ls_save('speed',position.coords.speed);
}
function ls_save(key,value) {
localStorage.setItem(key, value);
}
function get_location() {
while(typeof localStorage['latitude'] === 'string') {
return localStorage.getItem("latitude");
}
}
load_location();
//Code
console.log(get_location());
The new code after the comments. I do not know how performance this solution...
I have replaced console.log with alert and i get undefined then in some cases is not asynchronous.
Edit: 22/11:
Fixed the while
You can return the geolocation data as an array, by doing something like this:
function doSomethingWithGeo(geo) {
console.log(geo);
}
function get_location() {
navigator.geolocation.getCurrentPosition(function (position) {
doSomethingWithGeo([[position.coords.latitude, position.coords.longitude]]);
});
}
When you call get_location, it will retrieve the geolocation coordinates, and will call the function doSomethingWithGeo with the array you wanted. If you want to store your data, you can do it in the doSomethingWithGeo function.
Let me know if it's not what you were looking for.