This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 5 years ago.
I'm trying to use chrome.storage.local in my extension, and it doesn't seem to work. I used localStorage but realized that I can't use it in content scripts over multiple pages.
So, this is what I've come up with:
function save()
{
var channels = $("#channels").val();
var keywords = $("#keywords").val();
chrome.storage.local.set({'channels': channels});
chrome.storage.local.set({'keywords': keywords});
}
I do believe I'm doing the save() right, but the problem comes up in load():
function load()
{
var channels = "";
chrome.storage.local.get('channels', function(result){
channels = result;
alert(result);
});
var keywords = "";
chrome.storage.local.get('keywords', function(result){
keywords = result;
alert(result);
});
$("#channels").val(channels);
$("#keywords").val(keywords);
}
When the alerts trigger, it prints out [object Object]. Why is that? What am I doing wrong? I looked at the documentation/examples, but I can't seem to pinpoint the problem.
This code works for me:
function load() {
var channels = "";
var keywords = "";
chrome.storage.local.get('channels', function (result) {
channels = result.channels;
alert(result.channels);
$("#channels").val(channels);
});
}
Chrome.storage.local.get() returns an object with items in their key-value mappings, so you have to use the index of the key in your search pattern.
IMP:
Thanks to Rob for identifying: Chrome.storage.local.get() is asynchronous, you should modify your code to ensure they work after callback() is successful.
Let me know if you need more information.
debug or use
alert(JSON.stringify(result));
for more details as to what you are getting back
The "result" value you are using is an object that contains the storage value, to get the value you have to use result.keywords, which will get the value of the keywords. EX:
function load(){
chrome.storage.local.get('keywords', function(result){
var keywords = result.keywords;
alert(keywords);
});
chrome.storage.local.get('channels', function(result){
var channels = result.channels;
alert(channels);
});
}
Related
I've got a functional script on my site that allows me to open a link in a new window when a specific class is added to the link. I need a lot of those on my site though so I figured I'd make the script a bit easier to edit by working with variables.
In the process of changing out hardcoded strings for variables my script stopped working though. The only one that works is the var where I set the url.
I'm learning that ${} doesn't work everywhere. Hope that someone can point out where my thinking is wrong. Also hope that I got the terminology right, trying to learn though! :-)
var function1Name = "test_function";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class";
function ${function1Name}() {
window.open(function1Url, "_blank", "height=200");
}
jQuery("${function1Class}").click(function(){
${function1Name}()
});
None of your uses of ${} are valid JavaScript syntax.
Your function declaration van be replaced with:
window[function1Name] = function () {
window.open(function1Url, "_blank", "height=200");
}
Please note that the function will no longer be hoisted when declared this way, so order of operation matters.
The click handler can be written as follows:
jQuery(function1Class).click(function() { // Note that I just used the variable there.
window[function1Name]();
});
There is a ${} concept in JavaScript, but that is only in template literals:
const myVariable = "Foo";
const message = `myVariable contains: "${myVariable}"!`;
console.log(message);
There's several syntax issues here.
Firstly, function ${function1Name}() is not valid syntax. Function names must be defined before runtime. If you want to dynamically access a function, place it in an object and set the key with the variable reference.
Secondly, ${function1Name}() is again not valid syntax. You cannot invoke a function like that dynamically. Referring to the suggestion above, you can access an object dynamically so the first point fixes this problem.
Thirdly, string interpolation only works within template literals, so you need to delimit the string with backticks: ``. However it's completely redundant here as you can just use $(function1Class)
With those issues in mind, here's an updated example:
var function1Name = "test_function";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class";
var funcObj = {
[function1Name]: function() {
console.log(`function called, window would open here containing ${function1Url}...`);
// window.open(function1Url, "_blank", "height=200");
}
}
$(function1Class).click(function() {
funcObj[function1Name]()
});
/*
alternative using a template literal, although note that it's redundant here
$(`${function1Class}`).click(function() {
funcObj[function1Name]()
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me
One last thing to note is that no version of IE supports template literals, so be sure of your browser support requirements before using them.
So cool, I got it to work!
var function1Name = "test_function_1";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class1";
var function2Name = "test_function_2";
var function2Url = "https://www.cnn.com";
var function2Class = ".test_function_class2";
// Function 1
window[function1Name] = function () {
window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}
jQuery(function1Class).click(function() {
window[function1Name]();
});
// Function 2
window[function2Name] = function () {
window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}
jQuery(function2Class).click(function() {
window[function2Name]();
});
I can now add a bunch of url's and corresponding classes as was my intention. Super happy about that.
A follow up question though, as I'll have to experiment with what the ideal window parameters will be I'm trying to make those arguments variables as well. I've tried the examples of how to insert a variables output from the functional code but those methods don't work there. Here's that code:
var windowWidth = 250
var function1Name = "test_function_1";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class1";
var function2Name = "test_function_2";
var function2Url = "https://www.cnn.com";
var function2Class = ".test_function_class2";
// Function 1
window[function1Name] = function () {
window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=[windowWidth],height=745");
}
jQuery(function1Class).click(function() {
window[function1Name]();
});
// Function 2
window[function2Name] = function () {
window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}
jQuery(function2Class).click(function() {
window[function2Name]();
});
How would I insert the variables value (2nd line of Function1) there ?
This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 5 years ago.
I have one problem with javascript global variable,namely,i have global variable niz_opcija2,and i initialize it in one function,but in other function,it says it is undefined..
this is my javascript:
var niz_opcija2=[];
window.onload=function(){
ucitaj2();
ucitajKategorije();
}
function ucitaj2(){
$.get("/manager/categoriesArticle",function(data){
niz_opcija2.push(data);
console.log(data);
var select=document.getElementById("select3");
for(var i=0;i<niz_opcija2[0].length;i++){
var option=document.createElement("option");
option.value=niz_opcija2[0][i].categoryCode;
option.innerHTML=niz_opcija2[0][i].name;
option.id=niz_opcija2[0][i].name;
select.appendChild(option);
}
});
}
function ucitajKategorije(){
for(var i=0;i<niz_opcija2[0].length;i++){
var select=document.getElementById("selectKateg");
var option=document.createElement("option");
option.value=niz_opcija2[0][i].name;
option.innerHTML=niz_opcija2[0][i].name;
option.id=select.length;
select.appendChild(option);
}
}
(in this code i am trying to get data as json using $.get,and add it to select lists select3 and selectKateg,and ucitaj2() function is getting the data,but ucitajKategorije isn't,but I think it should work the same?)Does anyone know what can be the problem?Thanks in advance!
The issue is happening because your intialization of niz_opcija2 happens inside an asynchronous function call.
ucitaj2 returns immediately before $.get("/manager/categoriesArticle" has returned with data form the server.
Change to calling it in the get succes function:
var niz_opcija2=[];
window.onload=function(){
ucitaj2();
}
function ucitaj2(){
$.get("/manager/categoriesArticle",function(data){
niz_opcija2.push(data);
console.log(data);
var select=document.getElementById("select3");
for(var i=0;i<niz_opcija2[0].length;i++){
var option=document.createElement("option");
option.value=niz_opcija2[0][i].categoryCode;
option.innerHTML=niz_opcija2[0][i].name;
option.id=niz_opcija2[0][i].name;
select.appendChild(option);
}
//Call it here
ucitajKategorije();
});
}
I have been reading about Javascript Classes / Objects / Prototypes and come from a OOP background so I now wish to use Objects in Javascript.
However I think I am misunderstanding something. When using objects in the past in VB.net for example you created your object and was able to populate it by using dataclasses.
But here in the land of javascript things dont execute in the way I was expecting due to this async thing.
So I create my prototype as below and call the appropriate function but the function says it has fnished (but hasnt because it hasnt had a response from the $.post that is taking place, my code continues as null values and I dont get the info I want.
<!DOCTYPE html>
<html>
<body>
<button onclick="gogetperson()">Hello</button>
<p id="demo"></p>
<script>
function Person() {
this.firstName = '-';
this.surname= '-';
this.alias = 0;
}
Person.prototype.name = function() {
return this.firstName + " " + this.surname
};
Person.prototype.getPerson = function(personid)
{
var query = $.param({personid: personid});
var url = 'custom/person_get.php';
$.post(url, query, function (response) {
var obj = $.parseJSON(response);
this.firstname= obj['rFirstName'];
this.surname = obj['rLastName'];
this.alias = obj['rAlias'];
console.log(this.firstname);
});
}
function gogetperson()
{
var myPerson = new Person();
myPerson.getPerson(1)
console.log(myPerson.firstName);
}
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
</body>
</html>
So when my button runs the gogetperson function it finishes but has not got the data yet.
The console.log in the $.post section returns to the console the first name of my person but too late for me to use it.
Am I using prototypes in the wrong way?
I want to be able to use javascript as an object when getting data.
Or am I totally wrong.
My reason for wanting to use it this way was it seems the better choice over php objects.
Should I use PHP objects instead?
I ultimately want to get data from a mysql database and easily change my webpage with jquery and javascript.
You are missing one thing ,that is http call using $.post is asynchronous and it is not a blocking call. In order to get values back from getPerson() method, you have to pass a callback ( or function) in that function to get the result back but it is not a recomended approach . You can read about promises and use them because they are great.
However using a callback, you can do something like.
Person.prototype.getPerson = function(personid, cb)
{
var query = $.param({personid: personid});
var url = 'custom/person_get.php';
$.post(url, query, function (response) {
var obj = $.parseJSON(response);
var person = new Person();
person.firstname= obj['rFirstName'];
person.surname = obj['rLastName'];
person.alias = obj['rAlias'];
console.log(person.firstname);
cb(person);
});
}
And then you can call it like,
var myPerson = new Person();
function showPersonDetails(person){
console.log(person.name())
}
myPerson.getPerson(1, showPersonDetails);
I have a angularJS factory created to insert and get some values from IndexedDB. I can successfully insert the values to the IndexedDB. But when i try to get the values out of the DB and pass it to the controller i face problems.
factory.getAllProgressData = function() {
var dbOptions = {};
dbOptions.include_docs = true;
var output = {};
var result = {};
pouchDb.allDocs(dbOptions, function(err, res) {
if (err)
console.log(err);
if(res) {
output.weight = getWeightValues(res.rows);
console.log(output); // <== This console line prints the object
}
});
console.log(output); // <== This console line does NOT print the object
return output;
};
var getWeightValues = function(rows) {
var weightValues = [];
for (var i = 0; i < rows.length; i++) {
weightValues.push(rows[i].doc.Weight);
};
return weightValues;
};
As you can see in the comments of the code, when i print the object to the console at the first place it prints. But when i try to do it bellow it doesn't print. And the return value is also empty. I'm very new to javascript and this behavior is not clear to me. I want the result object to be returned to the Controller. Please help. Thanks in advance.
Just guessing but maybe the answer is because pouchDb.allDocs is an asynchronous function. This might be a good opportunity for you to learn about writing asynchronous JavaScript (aka AJAX). AJAX is a difficult concept for those new to JavaScript.
For example, you should be able to clearly understand what gets printed to the console and in what order in the following code:
function printB() { console.log('B'); }
console.log('A');
setTimeout(printB, 10);
console.log('C');
The answer is ACB, not ABC, and not BAC. If you understand why, you are well on your way to answering your own question.
A slightly more relevant example:
var a = 'A';
function changeAtoB() { a = 'B'; console.log(a); }
console.log(a);
setTimeout(changeAtoB, 10);
console.log(a);
The answer is AAB, not ABA, for the same reasons as the previous example. In addition, note that setTimeout does a specific thing, but it is a good general introductory example of the concept of an asynchronous function.
To address your question more directly, the second example corresponds to why your output variable is probably defined for one call to console.log but not the other.
I'm discovering the concept of "objects" in JavaScript. I'm making an RSS Parser, and I have an error (commented).
function MyParser (feed_url) { // Construct
"use strict";
this.feedUrl = feed_url;
this.pubArray = [];
if (typeof (this.init_ok) == 'undefined') {
MyParser.prototype.parse = function () {
"use strict";
var thisObj = this;
$.get(this.feedUrl, function (data, textStatus, jqXHR) {
if (textStatus == 'success') {
var xml = jqXHR.responseXML,
//lastBuildDate = new Date($(xml).find('lastBuildDate').text());
items = $(xml).find('item');
items.each(function () {
var pubSingle = thisObj.makeObj($(this).find('pubDate').text(),
$(this).find('link').text(),
$(this).find('title').text(),
$(this).find('description').text(),
$(this).find('encoded').text(),
$(this).find('commentRss').text(),
$(this).find('comments').last().text());
thisObj.pubArray.push(pubSingle);
});
console.log(thisObj.pubArray); // OK
}
}, 'xml');
console.log(this.pubArray); // Empty
return (this.pubArray);
};
MyParser.prototype.makeObj = function (pubDate, pubLink, pubTitle, pubDesc, pubContent, pubComCount, pubComLink) {
"use strict";
var pubSingle = {};
pubSingle.pubDate = new Date(pubDate);
pubSingle.pubLink = pubLink;
pubSingle.pubTitle = pubTitle;
pubSingle.pubDesc = pubDesc;
pubSingle.pubContent = pubContent;
pubSingle.pubComCount = pubComCount;
pubSingle.pubComLink = pubComLink;
return (pubSingle);
};
}
this.init_ok = true;
}
If you look at the console.log(), you'll see that the line // OK is outputting my array correctly.
But later, when returning from $.get, my array is empty.
Does anybody have an idea why, and how to correct that please?
This is not a problem with variable-scope. The problem here is that you're working with asynchronous flow and you're not thinking correctly the flow.
Let me explain:
When you do your .get, you fire a parallel asynchronous process that will request information from the browser, but your main program's flow keeps going, so when you get to your "return" statement, your array has not been filled yet with the response from your get method.
You should use your array from inside the get callback and not outside of it, since you can't guarantee that the array will have the information you need.
Does it make any sense?
Let me know!
Further explanation
According to your comments, you're still doing something like this:
var results = MyParser(feed_url);
//code that uses results.pubArray
And you cannot do that. Even though you're setting your "pubArray" inside your .get callback, you're trying to use pubArray right after you called MyParser and that's before the .get callback is called.
What you have to do, is call your next step on your program's logic from within the .get callback... that's the only way you can be sure that the pubArray is filled with proper data.
I hope that makes it clearer.
This is because your line
console.log(this.pubArray); // Empty
is being called directly after you issue your Ajax request; it hasn't had time to fetch the data yet. The line
console.log(thisObj.pubArray); // OK
is being called inside the Ajax callback, by which time the data has been fetched.
Thank you all, and particulary #Deleteman .
Here is what I did:
$.get(this.feedUrl, 'xml').success(function () {
thisObj.handleAjax(arguments[0], arguments[1], arguments[2]);
$(document).trigger('MyParserDone');
}).error(function () {
$(document).trigger('MyParserFailed');
});
Then, when i enter "HandleAjax", i'm back in my object context, so "this" refers to my object and the right properties. The only "problem" is that I have to set a listener (MyParserDone) to make sure the parsing is finished.