How to assign callback into a variable in JS
The base64 for the image prints to the console, but I cannot figure out how to assign this value into a variable. I have been looking around for a while now and cannot seem to find a simply, concise answer. I am really new to JS.
function toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
//return xhr.responseText;
}
toDataURL(lpif_anchor_tag_href, function (dataUrl) {
console.log(dataUrl);
});
toDataURL(lpif_anchor_tag_href_two, function (dataUrl) {
console.log(dataUrl);
});
javascript callback xmlhttprequest base64
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
add a comment |
The base64 for the image prints to the console, but I cannot figure out how to assign this value into a variable. I have been looking around for a while now and cannot seem to find a simply, concise answer. I am really new to JS.
function toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
//return xhr.responseText;
}
toDataURL(lpif_anchor_tag_href, function (dataUrl) {
console.log(dataUrl);
});
toDataURL(lpif_anchor_tag_href_two, function (dataUrl) {
console.log(dataUrl);
});
javascript callback xmlhttprequest base64
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
How about using global variableresult = reader.resultand later you can access viawindow.result
– meteorzero
Nov 23 '18 at 19:12
add a comment |
The base64 for the image prints to the console, but I cannot figure out how to assign this value into a variable. I have been looking around for a while now and cannot seem to find a simply, concise answer. I am really new to JS.
function toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
//return xhr.responseText;
}
toDataURL(lpif_anchor_tag_href, function (dataUrl) {
console.log(dataUrl);
});
toDataURL(lpif_anchor_tag_href_two, function (dataUrl) {
console.log(dataUrl);
});
javascript callback xmlhttprequest base64
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
The base64 for the image prints to the console, but I cannot figure out how to assign this value into a variable. I have been looking around for a while now and cannot seem to find a simply, concise answer. I am really new to JS.
function toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
//return xhr.responseText;
}
toDataURL(lpif_anchor_tag_href, function (dataUrl) {
console.log(dataUrl);
});
toDataURL(lpif_anchor_tag_href_two, function (dataUrl) {
console.log(dataUrl);
});
javascript callback xmlhttprequest base64
javascript callback xmlhttprequest base64
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
asked Nov 23 '18 at 18:10
AuuussiieeAuuussiiee
14
14
How about using global variableresult = reader.resultand later you can access viawindow.result
– meteorzero
Nov 23 '18 at 19:12
add a comment |
How about using global variableresult = reader.resultand later you can access viawindow.result
– meteorzero
Nov 23 '18 at 19:12
How about using global variable
result = reader.result and later you can access via window.result– meteorzero
Nov 23 '18 at 19:12
How about using global variable
result = reader.result and later you can access via window.result– meteorzero
Nov 23 '18 at 19:12
add a comment |
2 Answers
2
active
oldest
votes
The request you are making is asynchronous. This means while it's executing, your code continues on, so when you try to assign it's return value to a variable, it doesn't exist yet. What it returns is a promise.
So you need to do something like this:
var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// expected output: "Success!"
});
Also here is another answer that goes into detail for your type of usecase:
https://stackoverflow.com/a/47445455/5471957
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
add a comment |
You have 2 options
Use callbacks: this way you can access your result only inside callback function
Use synchronous request: not recommended, this way your main thread(browser page) will freeze until your request is completed
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451284%2fhow-to-assign-callback-into-a-variable-in-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The request you are making is asynchronous. This means while it's executing, your code continues on, so when you try to assign it's return value to a variable, it doesn't exist yet. What it returns is a promise.
So you need to do something like this:
var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// expected output: "Success!"
});
Also here is another answer that goes into detail for your type of usecase:
https://stackoverflow.com/a/47445455/5471957
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
add a comment |
The request you are making is asynchronous. This means while it's executing, your code continues on, so when you try to assign it's return value to a variable, it doesn't exist yet. What it returns is a promise.
So you need to do something like this:
var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// expected output: "Success!"
});
Also here is another answer that goes into detail for your type of usecase:
https://stackoverflow.com/a/47445455/5471957
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
add a comment |
The request you are making is asynchronous. This means while it's executing, your code continues on, so when you try to assign it's return value to a variable, it doesn't exist yet. What it returns is a promise.
So you need to do something like this:
var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// expected output: "Success!"
});
Also here is another answer that goes into detail for your type of usecase:
https://stackoverflow.com/a/47445455/5471957
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
The request you are making is asynchronous. This means while it's executing, your code continues on, so when you try to assign it's return value to a variable, it doesn't exist yet. What it returns is a promise.
So you need to do something like this:
var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// expected output: "Success!"
});
Also here is another answer that goes into detail for your type of usecase:
https://stackoverflow.com/a/47445455/5471957
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
edited Nov 23 '18 at 18:46
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
answered Nov 23 '18 at 18:28
SpeedOfRoundSpeedOfRound
632314
632314
add a comment |
add a comment |
You have 2 options
Use callbacks: this way you can access your result only inside callback function
Use synchronous request: not recommended, this way your main thread(browser page) will freeze until your request is completed
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
add a comment |
You have 2 options
Use callbacks: this way you can access your result only inside callback function
Use synchronous request: not recommended, this way your main thread(browser page) will freeze until your request is completed
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
add a comment |
You have 2 options
Use callbacks: this way you can access your result only inside callback function
Use synchronous request: not recommended, this way your main thread(browser page) will freeze until your request is completed
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
You have 2 options
Use callbacks: this way you can access your result only inside callback function
Use synchronous request: not recommended, this way your main thread(browser page) will freeze until your request is completed
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
answered Nov 23 '18 at 18:53
Medet TleukabilulyMedet Tleukabiluly
6,37522145
6,37522145
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451284%2fhow-to-assign-callback-into-a-variable-in-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How about using global variable
result = reader.resultand later you can access viawindow.result– meteorzero
Nov 23 '18 at 19:12