Develop Reference

JavaScript - Issues recovering a map in an object after being saved in localStorage

I've been dealing with this for some time. I've a list of sections in which the user checks some checkboxes and that is sent to the server via AJAX. However, since the user can return to previous sections, I'm using some objects of mine to store some things the user has done (if he/she already finished working in that section, which checkboxes checked, etc). I'm doing this to not overload the database and only send new requests to store information if the user effectively changes a previous checkbox, not if he just starts clicking "Save" randomly. I'm using objects to see the sections of the page, and storing the previous state of the checkboxes in a Map. Here's my "supervisor":
function Supervisor(id) {
this.id = id;
this.verif = null;
this.selections = new Map();
var children = $("#ContentPlaceHolder1_checkboxes_div_" + id).children().length;
for (var i = 0; i < children; i++) {
if (i % 2 == 0) {
var checkbox = $("#ContentPlaceHolder1_checkboxes_div_" + id).children()[i];
var idCheck = checkbox.id.split("_")[2];
this.selections.set(idCheck, false);
}
}
console.log("Length " + this.selections.size);
this.change = false;
}
The console.log gives me the expected output, so I assume my Map is created and initialized correctly. Since the session of the user can expire before he finishes his work, or he can close his browser by accident, I'm storing this object using local storage, so I can change the page accordingly to what he has done should anything happen. Here are my functions:
function setObj(id, supervisor) {
localStorage.setItem(id, JSON.stringify(supervisor));
}
function getObj(key) {
var supervisor = JSON.parse(localStorage.getItem(key));
return supervisor;
}
So, I'm trying to add to the record whenever an user clicks in a checkbox. And this is where the problem happens. Here's the function:
function checkboxClicked(idCbx) {
var idSection = $("#ContentPlaceHolder1_hdnActualField").val();
var supervisor = getObj(idSection);
console.log(typeof (supervisor)); //Returns object, everythings fine
console.log(typeof (supervisor.change)); //Returns boolean
supervisor.change = true;
var idCheck = idCbx.split("_")[2]; //I just want a part of the name
console.log(typeof(supervisor.selections)); //Prints object
console.log("Length " + supervisor.selections.size); //Undefined!
supervisor.selections.set(idCheck, true); //Error! Note: The true is just for testing purposes
setObj(idSection, supervisor);
}
What am I doing wrong? Thanks!

Please look at this example, I removed the jquery id discovery for clarity. You'll need to adapt this to meet your needs but it should get you mostly there.
const mapToJSON = (map) => [...map];
const mapFromJSON = (json) => new Map(json);
function Supervisor(id) {
this.id = id;
this.verif = null;
this.selections = new Map();
this.change = false;
this.selections.set('blah', 'hello');
}
Supervisor.from = function (data) {
const id = data.id;
const supervisor = new Supervisor(id);
supervisor.verif = data.verif;
supervisor.selections = new Map(data.selections);
return supervisor;
};
Supervisor.prototype.toJSON = function() {
return {
id: this.id,
verif: this.verif,
selections: mapToJSON(this.selections)
}
}
const expected = new Supervisor(1);
console.log(expected);
const json = JSON.stringify(expected);
const actual = Supervisor.from(JSON.parse(json));
console.log(actual);
If you cant use the spread operation in 'mapToJSON' you could loop and push.
const mapToJSON = (map) => {
const result = [];
for (let entry of map.entries()) {
result.push(entry);
}
return result;
}
Really the only thing id change is have the constructor do less, just accept values, assign with minimal fiddling, and have a factory query the dom and populate the constructor with values. Maybe something like fromDOM() or something. This will make Supervisor more flexible and easier to test.
function Supervisor(options) {
this.id = options.id;
this.verif = null;
this.selections = options.selections || new Map();
this.change = false;
}
Supervisor.fromDOM = function(id) {
const selections = new Map();
const children = $("#ContentPlaceHolder1_checkboxes_div_" + id).children();
for (var i = 0; i < children.length; i++) {
if (i % 2 == 0) {
var checkbox = children[i];
var idCheck = checkbox.id.split("_")[2];
selections.set(idCheck, false);
}
}
return new Supervisor({ id: id, selections: selections });
};
console.log(Supervisor.fromDOM(2));
You can keep going and have another method that tries to parse a Supervisor from localStorageand default to the dom based factory if the localStorage one returns null.

Save multiple objects in a sessionStorage

I am trying to save objects in a sessionStorage anytime I click on a bookmark icon. But instead of saving several objects. Anytime I click on my icon bookmark to save a book; it is being overridden by the new value.
How could I add several objects (books) in my sessionStorage?
Thanks
here is the code snippet
try {
const responseData = await sendHttpRequest(
'GET',
"https://www.googleapis.com/books/v1/volumes?q=" + search );
const listOfBooks = responseData;
console.log(listOfBooks);
for (i=0; i < listOfBooks.items.length; i++) {
console.log(listOfBooks.items[i]);
const postEl = document.importNode(template.content, true);
console.log("postEl", postEl);
//BookMark Icon event
const target = postEl.querySelector('.icon-bookmark');
target.addEventListener('click', () => {
sessionStorage.setItem('bookStorage', bookStorage);
sessionStorage.setItem('bookStorage' , JSON.stringify(bookStorage));
const extractedBook = sessionStorage.getItem('bookStorage');
const extractedBookInfo = JSON.parse(sessionStorage.getItem('bookStorage'));
console.log(extractedBookInfo);
});
postEl.querySelector('.id').textContent = 'id: '+ listOfBooks.items[i].id;
postEl.querySelector('.titre').textContent = 'Titre: '+ listOfBooks.items[i].volumeInfo.title;
postEl.querySelector('.author').textContent = 'Auteur: '+ listOfBooks.items[i].volumeInfo.authors;
postEl.querySelector('.desc').textContent ='Description: '+ listOfBooks.items[i].volumeInfo.description;
postEl.querySelector('img').src = listOfBooks.items[i].volumeInfo.imageLinks.thumbnail;
if (postEl.querySelector('.desc').textContent.length > 200) {
postEl.querySelector('.desc').textContent = postEl.querySelector('.desc').textContent.substring(0,200);
}
if (!postEl.querySelector('img').src) {
postEl.querySelector('img').src ="resources/css/img/unavailable.png";
}
listElement.append(postEl);
const bookStorage = {
id: listOfBooks.items[i].id,
title: listOfBooks.items[i].volumeInfo.title,
author: listOfBooks.items[i].volumeInfo.authors,
desc: listOfBooks.items[i].volumeInfo.description,
img: listOfBooks.items[i].volumeInfo.imageLinks.thumbnail
};
}
} catch (error) {
alert(error.message);
}
}
btnRechercher.addEventListener('click', fetchBooks, false);

You can only have unique keys inside session storage, that’s why everytime you insert a new entity with the same key the storage overwrites the old one. You can do a for and save every book, for example ‘book_1’, ‘book_2’. Or you can store an array, but you have to use json.stringify(name_of_your_array) and then when you want your array back you can use json.parse(storage.getItem(key))

How to remove data from firebase?

I am having trouble removing data from my database on Firebase. I am able to remove data but when I remove the data its removing all my users? I only wanted it to remove the user represented in the user ID.
My JS
function removeUser(userID){
var userRef = firebase.database().ref('users/');
// Returned no user found
//var userRef = firebase.database().ref('users/').child('userID');
// Returned reference child error
//var userRef = firebase.database().ref('users/').child(userID);
userRef.once('value', function(snapshot) {
if (snapshot.val() === null) {
alert("no user found");
}else{
userRef.ref.remove();
}
});
console.log('Remove Success');
}
document.getElementById('removeUserBtn').addEventListener('click', function(){
removeUser(userID);
});

You need to specify the full path to the child you are trying to remove:
var childUserRef = firebase.database().ref(`users/${userId}`)
and call the .remove() method as in : childUserRef.remove()
More details:
https://firebase.google.com/docs/reference/js/firebase.database.Reference

Firebase - Toggling value with transactions

I'm trying to let users favorite a project. I'm storing these projects at 2 places so I have to update them simultaneously. After looking at the firebase docs, using transactions seemed to be the best option.
.
Function to toggle the favorite status:
function toggleFavorite (projectReference, uid) {
projectReference.transaction(function(project) {
console.log('Before-Favorites :' + project.favoriteCount);
if (project.favorites && project.favorites[uid]) {
project.favoriteCount--;
project.favorites[uid] = null;
} else {
project.favoriteCount++;
if(!project.favorites) {
project.favorites= {};
}
project.favorites[uid] = true;
}
console.log(' After-Favorites :' + project.favoriteCount);
return project;
});
};
Function to add the eventListeners to the projects:
function AddToFavorite (uid, authorId) {
const favoriteList = document.querySelectorAll('.btnFavorite');
for(var i = 0; i<favoriteList.length; i++) {
favoriteList[i].addEventListener('click', function(event) {
const projectId = this.dataset.id;
console.log(projectId);
const globalProjectRef = firebase.database().ref('/projects/' + projectId);
const userProjectRef = firebase.database().ref('/user-projects/' + authorId + '/' + projectId);
toggleFavorite(globalProjectRef,uid);
toggleFavorite(userProjectRef,uid);
});
}
}
I want to store the uid of the current user under a 'favorites' node within the project location.
When i want to store the data I can see it appearing in the database but removing it after instantly. Followed by that i get an error in the console that my project object is null.
What's the best way of solving this issue ?

SoundCloud API - create user profiles based on ID in system

I have this system that takes in an array of SoundCloud user IDs, iterates them through a series of SC.get functions to obtain information of each user (user ID, username, followings and genre preference).
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<script>
//Initialize soundcloud API with client ID
SC.initialize({
client_id: "54cb0ff94ff9313ef6ca4674e9fe3026"
});
var userIds = [9110252, 55829847, 145189041, 4184647, 225458844, 22557004, 109447512];
var userids = [];
var usernames = [];
var userFollowingsE = [];
var profile =[];
var ready = 0
for(u = 0; u < userIds.length; u++){
var id = userIds[u];
getUserData(id);
function getUserData(userid){
//**************************** USER ***************************//
SC.get("/users/"+id, function(user){
userids.push(user.id);
usernames.push(user.username);
});
//********************** USER/FOLLOWINGS **********************//
SC.get('/users/'+id+'/followings',function(followings) {
var userFollowings = [];
for(i = 0; i < followings.collection.length; i++) {
userFollowings.push(followings.collection[i].username);
}
userFollowingsE.push(userFollowings);
ready++
if(ready >= userIds.length) onComplete();
});
}
}
function onComplete(){
console.log(usernames);
console.log(userIds);
console.log(userFollowingsE);
}
var users = [
{ userid: this.userids,
username: this.usernames,
genre: this.genres,
followings: this.followings,
}
]
</script>
</body>
What I want the system to do is associate these bits of information with their corresponding user in an object e.g.
var users = {
user9110252: {
userid = userid,
username = username,
genrePref = genre
followings = followings
}
}//etc...
However the arrays outputted from the system change order each time and I don't think are associated with one another.
I am unsure of how to do this and welcome any suggestions.

If you want the resulting array to look like you described, you should build the user Object as you go, instead of creating multiple arrays and then merging them.
Here is what I've tried, run it and see if it gives you the expected result. Also note that I did not include the genres, because I could not find them in the data provided.
//Initialize soundcloud API with client ID
SC.initialize({ client_id: "54cb0ff94ff9313ef6ca4674e9fe3026" });
var userIds = [9110252, 55829847, 145189041, 4184647, 225458844, 22557004, 109447512],
users = [];
for(var i=0; i<userIds.length; i++){ getUserData(userIds[i]); }
function getUserData(userid){
// The user Object you'll be building
var myUser = {};
// Grab the info for this user
SC.get("/users/"+userid, function(user){
myUser.userid = user.id;
myUser.username = user.username;
// Then get its followings
SC.get('/users/'+userid+'/followings',function(followings) {
myUser.followings = followings.collection.map(function(user){
return user.username;
});
// Push that user to the user list
users.push(myUser);
// Execute the callback if all users have been fetched
if(users.length == userIds.length){ onComplete(); }
});
});
}
function onComplete(){
console.log(users);
// Just for the demo:
document.body.innerHTML = '<pre>' + JSON.stringify(users,0,2) + '</pre>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>