Below is a small example of calling some JSON, displays a list via the Mustache template engine, everything’s good.
The trouble is. I’d like to make another AJAX call and get some other JSON. But. I need the value from one of the variables inside the success method passed/available to the then method.
How do we get the snippet value from success?
var people = "https://swapi.co/api/people/";
$.getJSON(people, function(data) {
var template = $('#results_tpl').html();
var html = Mustache.render(template, data);
$('#results').html(html);
})
.success(function() {
var snippet = "Hello Barry, working with JSON.";
console.log(snippet);
})
.then(function() {
console.log(snippet); //snippet is not defined
//...get some other JSON based on the snippet value
});
I was going to start talking about the Fetch API @rpkamp and if this would be a better approach than AJAX, though after further reading, the support is not the best and introducing polyfills. Though looks exciting.
For another day I think
Ok, still not 100% about the promises, I get the idea.
Not sure if I need to add a new Promise somewhere in my code below.
You can return it from your success function and accept it as a parameter to your then function.
Is this what you mean?
.success(function() {
var snippet = "Hello Barry, working with JSON.";
console.log(snippet);
return snippet;
})
.then(function(snippet) {
console.log(snippet);
});
Now instead of
snippet is not defined
It returns the full people object, why is that and how do I just get the variable value?
Updated codepen
The callback you pass to $.getJSON(), .then() and .success() are all called when the request completes, so you kinda have a triple redundancy here (BTW .success() is actually deprecated). For a promise chain you might use .then() only like so:
$.getJSON(url).then(function handleResponse () {
var template = $('#results_tpl').html()
var html = Mustache.render(template, data)
$('#results').html(html)
return 'Hello Barry, working with JSON.'
}).then(console.log) // logs "Hello Barry, working with JSON."
Been trying different combinations trying to get what I need. I spent a good 30 mins trying to understand why things weren’t working using your example.
I then realized, the function parameter was not wrapped in the parenthesis
$.getJSON(url).then(function handleResponse () {
to $.getJSON(url).then(function(handleResponse) {
Good news. I have a value returning with the updated code, thanks for the explanation
Ok, so now instead of console.log .then(console.log) // displays value
I need to add the value into a variable so I can run another getJSON based on that value.
Something like:
// tag being the value return from console.log above
.then(function() {
var test = "//example.com/" + tag;
$.getJSON(test, function(data) {})
});
Not sure how this should fit together, and how do I call the value?
var people = "https://swapi.co/api/people/";
$.getJSON(people).then(function(data) {
var template = $('#results_tpl').html()
var html = Mustache.render(template, data)
$('#results').html(html);
var tag = $('#results li').attr('data-skin');
return tag
}).then(console.log)
/*
.then(function() {
var test = "//example.com/" + tag;
$.getJSON(test, function(data) {}
});
*/
I just used this as an example to see if I can access the value. I didn’t mean to imply I needed the full array, should of used a better example, sorry for the confusion.
Thanks anyhow, I’ll surely be needing this approach moving forward
The issue is, as mentioned above #7 the value is display in the console using: .then(console.log)
I now need to access this value var tag to run another getJSON.
Again, explained in my last post
Something’s not right, can’t put my finger on the brackets matching up?
Can you see the error
$.getJSON(people).then(function(data) {
var template = $('#results_tpl').html()
var html = Mustache.render(template, data)
$('#results').html(html);
var tag = $('#results li').attr('data-skin');
return tag
}).then(function(tag) {
var test = "//example.com/" + tag;
$.getJSON(test, function(data) {}
});
Oops sorry, forgot the data parameter… handleResponse was actually supposed to be the function name. ^^
Just curious… if that data-skin attribute is coming from the template you rendered with the data, wouldn’t that value be available in the data anyway? Seems like a bit of an unnecessary DOM query here…
@computerbarry you can see such errors in the browser console (usually cmd / ctrl + shift + j)… you might also consider using a text editor that has linting capabilities. E.g. I’m mostly using VSCode, which highlights such syntax errors right in the code. Might save you a lot of headache… ;-)
Anonymous functions are usually fine, I just wanted to make clear that this is the function to handle the response. :-) (It also helps with debugging as you’ll get more telling stack traces.)
Yes, the value you return from a then function (unless it is itself a promise) will get wrapped in another promise that immediately resolves with that value; this allows chaining like in the above example.
Yeah, sublime text is pretty bare bones by itself… which is certainly not a bad thing, but you’d probably need an extension for that then. With a full-fledged IDE you’ll of course have more features out of the box… and IMHO VSCode does a pretty good compromise in this respect, but that’s a matter of personal preference and requirements really.
