My localStorage is only saving a few variables (3) of similar names, and then proceeding to override the last variable with the new value.
What I am trying to do is add variables into localStorage that have a name and a number attached to them such as Test1, Test2, Test3, etc.
The only issue is that after the third element, in this case Test3, the key gets overridden to Test4 and the value changes to the new value. This happens forever as long as the word Test is the same.
I can add other values just fine, but only up to 3 of the same root word.
This is the code I am using to add the elements:
const AddToLocalStorage = (type, contents) => {
let ind = 0;
Object.keys(localStorage).forEach(function (key) {
if (key == (type + ind)) {
ind++;
} else {
return;
}
});
localStorage.setItem((type + ind), JSON.stringify(contents));
}
type is a string such as Test
contents is the value stored
Thanks in advance :)
Edit - Can you clarify how to call the AddToLocalStorage function
AddToLocalStorage("Test", "value");
In localStorage this would set like { "Test0", "value" }
First of all, JavaScript Object Property order isn't guaranteed, therefore you're probably not receiving the keys in the same order as your browser shows them
That said, lets add some console.log's to debug the code:
const AddToLocalStorage = (type, contents) => {
let ind = 0;
console.log('Existing keys', Object.keys(localStorage));
Object.keys(localStorage).forEach(function (key) {
if (key == (type + ind)) {
ind++;
} else {
return;
}
});
console.log('Set', (type + ind))
localStorage.setItem((type + ind), JSON.stringify(contents));
}
AddToLocalStorage("Test", "value1");
On the second run, this logs:
Existing keys (3) ["Test2", "Test0", "Test1"]
Set Test2
Here we can see that (type + ind) will be Test2, because (key == (type + ind)) will be true for Test1 and Test2.
Since Test2 already exists, you'll override the existing value.
Related
I'm trying to remove an entry from an array if a certain condition is true, but when I console.log the array of objects, the object has not been removed and I'm confused why. Am I using the Splice() function correctly?
var itemsProcessed;
people.forEach(async function(peep, index, object){
var d = new Date();
var currenttime = d.getTime();
if (peep.endtime < currenttime){
var rolesub = guild.roles.find(r => r.name == roleNameSub);
var user2 = await client.fetchUser(peep.id);
var member = await guild.fetchMember(user2);
member.removeRole(rolesub);
object.splice(index, 1); //This seems to go wrong...
console.log(peep.id + " Lost subscription!");
user2.send("Your subscription ended!");
}
itemsProcessed++;
if (itemsProcessed === object.length){
SaveJson(people, "users.json");
}
});
Your problem is the fact you're splicing the same array you're iterating hence why the indexes will not be correct.
You should create a copy of the array before iterating it and remove elements from the original array by retrieving the index of the element you want to remove, take a look below.
arr.slice(0).forEach(function(item) {
arr.splice(arr.indexOf(item), 1);
});
var arr = [{0:0},{i:1},{i:"test"},{i:"Something else"},{i:"Test"},5];
arr.slice(0).forEach(function(item) {
if(item != 5)
arr.splice(arr.indexOf(item), 1);
});
console.log(arr);
One thing you can consider and change is that when you are iterating the array, don't delete from it while iterating. Just mark the entry for deletion. Then, when you are done, filter out the ones that need to be removed.
For example:
people.forEach( (person,i) => {
if( /* person needs to be removed from people */ ) {
people[i] = null; // use use array from 3rd parameter if you want to pass it in
}
});
// then remove unwanted people
people = people.filter( person => person != null );
Or, if you don't want to set the person to null, then you can set a flag in the object instead to mark it for deletion.
Example:
people.forEach( (person,i) => {
if( /* person needs to be removed from people */ ) {
person.toBeDeleted = true;
}
});
people = people.filter( person => person.toBeDeleted !== true );
What is probably an even better or cleaner approach is to not use forEach but just use filter only.
Example:
people = people.filter( p_person => {
if( /* person stays */ ) {
return true;
} else {
return false;
}
});
In the following code, the user is able to create variables utilizing the window object via an input type text element. I've written a function that console logs the name of the variable followed by the value of 0 in which the variable is initialized. This only occurs when the following key string literal, "-nr " precedes the desired name for the created variable.
The goal of this exercise is to increment any created variable value by 1 when the variable name is reentered into the input element. My attempt at doing so is by first writing the first function, varCreate to declare and initialize variables to 0, push them into an array, and console log the variable name followed by its value. The next function which I have a problem with (varPlus) is meant to add 1 to the value of each value when a particular name is entered into the input element however, it adds a few more than 1 even when I utilize a for loop to evaluate if the string literal value of the input element value property is equivalent to each element of the array varArray.
const _in = document.getElementById('in');
var varArray = [];
function varCreate(e) {
let _key = e.key;
if(_key === "Enter") {
if(_in.value.substring(0, 4) == "-nr ") {
window[_in.value.substring(4).replace(/\s/g, "_")] = 0;
varArray.push(_in.value.substring(4).replace(/\s/g, "_"));
console.log("var: " + varArray[varArray.length - 1] + "\nvalue: " + window[varArray[varArray.length - 1]]);
_in.value = "";
}
}
}
function varPlus(e1) {
let _key1 = e1.key;
if(_key1 === "Enter") {
checker = new RegExp(_in.value.replace(/\s/g, "_"), "gi");
for(var i = 0; i < varArray.length; i++) {
if(checker.test(varArray[i])) {
window[varArray[i]] += 1;
console.log("var: " + varArray[i] + "\nvalue: " + window[varArray[i]]);
}
}
delete window["checker"];
}
}
_in.addEventListener('keydown', varCreate);
_in.addEventListener('keydown', varPlus);
<input id='in' type='text' />
The end result when attempting to utilize varPlus is that it'll console log all variable names and values which somehow increment in value when it should only be console logging only the variable name which I'm trying to access via user input followed by its value. I would greatly appreciate it if anyone can shed some light on how I'm encountering these errors.
First of all it is really helpful if you try and make your code executable :)
Now for the user generated variables you could do something like this:
// DOM Elements
const input_variable = document.getElementById("input_variable");
const button_createVariable = document.getElementById("button_createVariable");
// Variables
let userVariables = {};
// Event listeners
window.addEventListener("keyup", event => {if(event.key == "Enter") parseVariable()});
button_createVariable.addEventListener("click", parseVariable);
function parseVariable() {
// Get the variable name and remove all spaces
let variableName = input_variable.value.substring(0, input_variable.value.indexOf("=")).replace(/\s+/g, '');
// Get the variable value and remove all spaces
let variableValue = input_variable.value.substring(input_variable.value.indexOf("=") + 1, input_variable.value.length).replace(/\s+/g, '');
// Add the variable to the object
userVariables[variableName] = variableValue;
// Clear the input
input_variable.value = "";
// Log the object into the console
console.log(userVariables);
}
<input id='input_variable' type='text'/><button id="button_createVariable">Create</button>
WARNING You of course still need to verify the user input. At this state it will accept everything as input. But now you can loop through the object and count up (or whatever) if already exists.
Oh yes btw, the syntax is simply: <name> = <value> eg. foo = 10.. unimportant detail :P
I'm using the code below to check if var1 exists, then assigning another variable (promt) to store var1 provided that the user types in the variable. Problem is I have about twenty variables I need to check so my code looks like the below times ten:
if (typeof var1 !== 'undefined') {
if(selection==var1){
var promt = var1;
}
}
if (typeof var2 !== 'undefined') {
if(selection==var2){
var promt = var2;
}
}
This (a) makes a ton of inefficient code and (b) may cause errors if I have over twenty variables. Is there a way to check if var1, var2, var3, etc.. exists then stop checking when the variables stop?The goal is to be able to have one hundred variables and still have the same amount of code I would have if there were two.
If your variables are fields on an object you can easily build the field names dynamically:
fieldname = 'var' + index;
if (typeof obj[fieldname] !== 'undefined') {
if (selection == obj[fieldname]){
var promt = obj[fieldname];
}
}
For local variables I however can't provide a solution.
First thing first var is reserved word in javascript, so you cannot use it as variable names, hence I use _var here instead.
I made a jsFiddle for this solution, so check it out pls.
You may also look at the code below:
for (i in _var) {
// Loop through all values in var
if ((typeof _var [i] !== undefined) &&
selection_array.indexOf(_var [i]) >= 0) {
// note that array.indexOf returns -1 if selection_array does not contain var [i]
prompt = _var[i]; // use this if you only want last var[i] satisifying the condition to be stored
prompt_array.push(_var[i]);// use this if you want to store all satisifying values of var[i]
}
}
Also check the below snippet
// Lets declare and give some example value to _var, Note that you cannot use var as variable name as it is a reserver word in javascript
var _var = ['foo1', 'foo2', 'foo3', 'foo4'];
// Declare a variable called prompt (actually not necessary normally)
var prompt;
// Declare a array called prompt_array to store the output
var prompt_array = [];
// Declare and give some example value to selection_array
var selection_array = ['foo2', 'foo3'];
// main program to solve the problem
for (i in _var) {
// Loop through all values in var
if ((typeof _var [i] !== undefined) &&
selection_array.indexOf(_var [i]) >= 0) {
// note that array.indexOf returns -1 if selection_array does not contain var [i]
prompt = _var[i]; // use this if you only want last var[i] satisifying the condition to be stored
prompt_array.push(_var[i]);// use this if you want to store all satisifying values of var[i]
}
}
// output for visualizing the result
document.getElementById('output').innerHTML += 'prompt = ' + prompt + '<br/>';
document.getElementById('output').innerHTML += 'prompt_array = ' + prompt_array.toString();
<div id="output">
</div>
You can ask me through commenting if you have a further problem on this :D.
i validate my formular with ajax and get back the following json object:
{"username":["Please enter a username"],"email":["Please enter an email"],
"plainPassword":{"first": ["Please enter a password"]},"firstname":
["This value should not be blank."],"lastname":["This value should not be blank."],
"terms":["This value should be true."],"privacy":["This value should be true."],
"captcha":["Code does not match"],"securityQuestion":["This value should not be blank."],
"plainSecurityAnswer":["This value should not be blank."],"intention":
["This value should not be blank."],"addresses":[{"state":["This value should not be blank."],
"city":["This value should not be blank."],"zipcode":["This value should not be blank."],
"country":["This value should not be blank."]}]}
The keys are mapped to the input fields id always by:
var id = "fos_user_registration_form_" + key;
I want to present these errors in an efficient way as tooltips to the fields. For that, i've written the following jQuery code (where callback is the returned json object):
$.each( callback, function( key, entry ) {
if(key != "addresses" && key != "plainPassword")
{
var id = "#fos_user_registration_form_" + key;
$(id).tooltip('destroy');
$(id).tooltip({'title': entry});
$(id).closest('div[class="form-group"]').addClass('has-error');
}else if(key == "addresses"){
$.each( entry[0], function( keyAddress, entryAddress ) {
var id = "#fos_user_registration_form_" + key + "_0_" + keyAddress;
$(id).tooltip('destroy');
$(id).tooltip({'title': entryAddress});
$(id).closest('div[class="form-group"]').addClass('has-error');
});
}else if(key == "plainPassword")
{
var id= "#fos_user_registration_form_plainPassword_first,#fos_user_registration_form_plainPassword_second";
$(id).tooltip('destroy');
$(id).tooltip({'title': entry.first});
$(id).closest('div[class="form-group"]').addClass('has-error');
}});
It is working, but i think not very dynamic because i know in this case that the entries of the key "addresses" and "plainPassword" aren't strings and that i have to iterate on them again (here only on addresses).
Is there a nicer way to do this by only using the key and entry variable of the loops, without knowing the "key" names of the json ?
I thought of something like: While entry !== "string", iterate as long threwthe entries as there is another array or object in it and build up the "id" variable. When there is a string field as "entry", use it as tooltip text.
Hope you guys can help me.
Regards.
Recursion will do this!
eg http://repl.it/3hK/5
Code -
var id_stub = "#fos_user_registration_form_"
// Here's the recursive function - we kick it off below.
function process(thing, id) {
var key
for (key in thing) {
// Handle the arrays
if ('length' in thing[key]) {
// Handle the end - we found a string
if (typeof thing[key][0] == "string") {
var html_id = id_stub + id + key
var err_msg = thing[key][0]
console.log(html_id, ":", err_msg)
// Now do your jquery using the html_id and the err_msg...
}
// Else we found something else, so recurse.
else {
var i = 0;
while (i < thing[key].length) {
process(thing[key][i], key + "_" + i + "_")
i++
}
}
}
// Handle the objects by recursing.
else {
process(thing[key], key + "_")
}
}
}
// Start the recursion from here.
process(callback, "")
I added an extra address to test how this code handles nested addresses, and using that I get this in the console:
#fos_user_registration_form_username : Please enter a username
#fos_user_registration_form_email : Please enter an email
#fos_user_registration_form_plainPassword_first : Please enter a password
#fos_user_registration_form_firstname : This value should not be blank.
#fos_user_registration_form_lastname : This value should not be blank.
#fos_user_registration_form_terms : This value should be true.
#fos_user_registration_form_privacy : This value should be true.
#fos_user_registration_form_captcha : Code does not match
#fos_user_registration_form_securityQuestion : This value should not be blank.
#fos_user_registration_form_plainSecurityAnswer : This value should not be blank.
#fos_user_registration_form_intention : This value should not be blank.
#fos_user_registration_form_addresses_0_state : This value should not be blank.
#fos_user_registration_form_addresses_0_city : This value should not be blank.
#fos_user_registration_form_addresses_0_zipcode : This value should not be blank.
#fos_user_registration_form_addresses_0_country : This value should not be blank.
#fos_user_registration_form_addresses_1_state : This value should not be blank.
#fos_user_registration_form_addresses_1_city : This value should not be blank.
#fos_user_registration_form_addresses_1_zipcode : This value should not be blank.
#fos_user_registration_form_addresses_1_country : This value should not be blank.
and sets up the variables you need to do your jQuery work.
function isValidationMessage(entry) {
return entry.length === 1 && typeof entry[0] === 'string';
}
function displayValidationMessage(key, message){
var id = "#fos_user_registration_form_" + key;
$(id).tooltip('destroy');
$(id).tooltip({'title': message});
$(id).closest('div[class="form-group"]').addClass('has-error');
}
function displayValidationMessageForArray(key, entries) {
for(var i = 0; i < entries.length; i++) {
$.each(entries[i], function(keyAddress, entryAddress) {
displayValidationMessage(key + "_i_" + keyAddress, entryAddress);
})
}
}
function displayValidationMessageForObject(key, entries) {
$.each(entries, function(entry, message) {
displayValidationMessage(key + "_" +entry, message);
})
}
function displayAllValidationMessages(callback) {
$.each( callback, function( key, entry ) {
if(isValidationMessage(entry)) {
displayValidationMessage(key, entry);
}else if($.isArray(entry)){
displayValidationMessageForArray(key, entry);
}else {
displayValidationMessageForObject(key, entry);
}
});
}
not fully tested, idea is to extract the if else to small function, and reuse them as much as possible
I'm trying to apply a constraint on combobox. It's half-working at the moment.
On the combobox, I have this listener:
[...]
listeners: {
'focus': function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var getOrgValue = orgComboVal.getValue();
if (typeof getOrgValue !== undefined) {
reseaulist.clearFilter(true);
for (var q = 0, l = getOrgValue.length; q < l; q++) {
reseaulist.filter([
{property:'code_organisme', value: getOrgValue[q]}
]);
}
}
}
}
Ext.getCmp('Org1') defines another combobox.
When orgComboVal.getValue() is a single value, the filter is well applying.
but when it's an array of value, eg ["5", "9"], it's not working and the combobox supposed to be filtered shows no value (so I guess a filter is still applied but in an incorrect way).
I guess it's because the reseaulist.filter is called multiple time.
How can I achieve this ?
I saw the filterBy method but I don't know how to make it work.
Also, this post is interesting : How to filter a store with multiple values at once? but same, can't make it work since
getOrgValue.split(',')
is showing an error
(Object Array has no method split)
Any tips ? I'm using ExtJS 4.2.
EDIT
Thanks to #rixo, I've made it.
Also, I had to change some of the code he provided me, because the value of the Org1 combobox was always an array, even if empty, so the store filter was never cleared.
Here it is :
'focus': function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
console.log(values)
if (values != null) {
reseaulist.clearFilter(false);
if (Ext.isArray(values)) {
if (0 < values.length) {
reseaulist.filterBy(function(record, id) {
return Ext.Array.contains(values, record.get('code_organisme'));
});
} else {
reseaulist.clearFilter(true);
}
}
}
}
Each filter is applied one after the other on the previously filtered data set, so your code implements a logical AND. That's why all values are filtered out...
Here's an example using filterBy to accept any value that is in your array:
function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
if (values != null) {
store.clearFilter(false);
if (Ext.isArray(values)) {
store.filterBy(function(record, id) {
return Ext.Array.contains(values, record.get('code_organisme'));
});
} else {
record.get('code_organisme') === values;
}
} else {
store.clearFilter(true);
}
}
Or you could also use a regex with the filter method:
function (combo, value) {
var orgComboVal = Ext.getCmp('Org1')
var values = orgComboVal.getValue();
if (values != null) {
var filterValue = Ext.isArray(values)
? new RegExp('^(?:' + Ext.Array.map(values, function(value){return Ext.escapeRe(value)}).join('|') + ')$')
: values;
store.clearFilter(false);
store.filter('code_organisme', filterValue);
} else {
store.clearFilter(true);
}
}
Concerning your error, arrays indeed don't have a split method. Strings can be split into an array. Arrays, on their side, can be joined into a string...
Try This....
var getOrgValue = "5,9,4"; // array of value
reseaulist.filterBy(function(rec, id) {
return getOrgValue.indexOf(rec.get('code_organisme')) !== -1;
});