Updating JSON file in Javascript - javascript

On a program that I am working on, I send a literal variable to local strorage with JSON.stringify. The plan is I want to constantly update the local storage and add onto the existing local storage. I'm getting problems with the parsing aspect of the JSON file. My code for adding to storage is this:
function addtoStorage(key, data) {
if (typeof(Storage) !== "undefined") {
if (localStorage[key]) {
console.log("Local Storage stuff" + localStorage[key]);
var olddata = JSON.parse(localStorage[key]);
var dataJSON = JSON.stringify(olddata + data);
localStorage[key] = localStorage[key] + dataJSON;
}
else {
var dataJSON = JSON.stringify(data);
localStorage[key] = dataJSON;
}
}
else {
console.log("You don't have storage capabilities. Sorry. Next time improve your browser.");
}
}
;
And my output is this on console.log is:
Local Storage stuff{"asdf":"","tes":6,"type":"asdf","ast":1,"sd":"","ew":"","asdf":{"te":0,"wer":0},"asf":"","te":"","context":{"asdf":1,"total_hits":0,"asdf":1,"tew":0,"asdf":"","tes":"","date":"asfd-asdf-","asdf":0},"asdf":""}"[object Object][object Object]" main.js:487
Uncaught SyntaxError: Unexpected string
I'm fairly sure I understand what the problem is. I just can't seem to figure out how to fix it. It is obviously closing out the JSON object too soon, any recommendations???

I don't think you should be doing olddata + data since stringify is for parsing JavaScript objects to JSON and you can't just add two objects together.
You should try implementing an object merge function, like the one jQuery uses:
function merge( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
for ( ; j < len; j++ ) {
first[ i++ ] = second[ j ];
}
first.length = i;
return first;
}
then just do
var newdata = merge(olddata, data);
var dataJSON = JSON.stringify(newdata);
https://github.com/jquery/jquery/blob/master/src/core.js#L390

Uncaught SyntaxError: Unexpected string is coming from JSON.parse, this is because it is no longer valid JSON (http://json.org/)
What you are doing is adding an object to an object, which turns out to be a string
Then when you go to stringify it, the entire thing will be taken is just a string the first time and the second time. So it will go through fine, then the third time when it tries to parse it, the function will fail because you have added a JSON object with a string.
If you are only storing JSON objects you can use jQuery's extend function (http://api.jquery.com/jQuery.extend/)
Or if you are storing more then just objects change it all to an array
This should cover everything
function addtoStorage(key, data) {
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem(key)) {
console.log("Local Storage stuff" + localStorage.getItem(key));
var olddata = JSON.parse(localStorage.getItem(key));
var newdata = null;
if(olddata instanceof Array){
olddata.push(data);
newdata = olddata;
}else if(data instanceof Array || !(data instanceof Object) || !(olddata instanceof Object)){
newdata = [olddata, data];
}else if(data instanceof Object && olddata instanceof Object){
newdata = $.extend(olddata, data);
}
var dataJSON = JSON.stringify(newdata);
localStorage.setItem(key, dataJSON);
}
else {
var dataJSON = JSON.stringify(data);
localStorage.setItem(key, dataJSON);
}
}
else {
console.log("You don't have storage capabilities. Sorry. Next time improve your browser.");
}
}

Related

JavaScript Obj.length method returns undefined despite dictionary containing elements

I've been working on a project and I'm currently working on a function which dynamically creates a dictionary data structure. The key used is the roll number of the student, and the value is the student's name.
But I'm unable to iterate through this dictionary. I've tried displaying the dictionary on console, but all I could see is an empty dictionary. I could see the elements in it, only if I expand it further. And when I display length using Obj.length on console, it displays 'undefined'. I've read on other questions that Obj.length only works on arrays(i.e., enumerable types), and I've tried using an array instead of a dictionary. In that case, it shows an empty array and would not show values unless I manually expand it. I've also tried Obj.keys() method on the dictionary, and I've encountered the same issue.
This is the function's code:
function dictGenerator(rollnos, selectedValue) {
var dict = {};
for(let i = 0; i < rollnos.length; i++) {
get(child(dbref, "RegisterNos/" + rollnos[i])).then((snapshot)=>{
if(Object.keys(snapshot.val()).length-1 == selectedValue){
dict[rollnos[i]] = snapshot.val()["name"];
}
});
}
console.log(dict);
console.log(dict.length);
}
}
Any help on how I could iterate through my dictionary would be appreciated, Thank you.
Edit:
code implementation using promises.
function dictGenerator(regnos, selectedValue) {
const get_dict = async () => {
var dict = {};
for(let i = 0; i < regnos.length; i++){
get(child(dbref, "RegisterNos/" + regnos[i])).then((snapshot)=>{
if(Object.keys(snapshot.val()).length-1 == selectedValue){
dict[regnos[i]] = snapshot.val()["name"];
}
});
}
return dict;
};
get_dict().then((dict) => {
console.log(dict);
});
}
Basing on comments made by VALZ and JaredSmith, this is the working code:
function dictGenerator(regnos, selectedValue) {
const get_dict = async () => {
var dict = {};
for(let i = 0; i < regnos.length; i++){
await get(child(dbref, "RegisterNos/" + regnos[i])).then((snapshot)=>{
if(Object.keys(snapshot.val()).length-1 == selectedValue){
dict[regnos[i]] = snapshot.val()["name"];
}
});
}
return dict;
};
get_dict().then((dict) => {
console.log(dict);
});
}
}

localStorage resets on Chrome after getItem, setItem

I am trying to save data in localStorage with jQuery. The data I am trying to save resets every time I refresh my Chrome browser. First, I retrieve the data from a dictionary through getItem, then I set it using setItem. Sounds pretty simple, but I can't get it to save. Any help is appreciated. Thanks
Here's my js:
moneylove = {"snacks":{"c":1,"m":1,"e":2},"food":{"c":2,"m":0,"e":1},"soap":{"c":2,"m":0,"e":0},"toys":{"c":2,"m":1,"e":2}} //dog state
for (state in moneylove["snacks"]){
stateadd = JSON.parse(localStorage.getItem(state))
stateadd += moneylove["snacks"][state]
localStorage.setItem(state,JSON.stringify(stateadd))
}
console.log(localStorage)
You replace the keys because the each sub-object has same properties so that it replaces anyway. Change to be like this.
var moneylove = {"snacks":{"c":1,"m":1,"e":2},"food":{"c":2,"m":0,"e":1},"soap":{"c":2,"m":0,"e":0},"toys":{"c":2,"m":1,"e":2}} //dog state
for (state in moneylove["snacks"]){
stateadd = JSON.parse(localStorage.getItem(state))
stateadd += moneylove["snacks"][state]
localStorage.setItem("snacks" + state,JSON.stringify(stateadd)) // Make key be unique.
}
console.log(localStorage)
EDIT
The complete calculation and storage method as following example. This can calculate the states in each object in moneylove.
var moneylove = {"snacks":{"c":1,"m":1,"e":2},"food":{"c":2,"m":0,"e":1},"soap":{"c":2,"m":0,"e":0},"toys":{"c":2,"m":1,"e":2}} //dog state
for(var itemKey in moneylove) {
var item = moneylove[itemKey];
for (var stateKey in item){
var storageKey = itemKey + "-" + stateKey;
var stateadd = JSON.parse(localStorage.getItem(storageKey) || '0')
stateadd += item[stateKey];
localStorage.setItem(storageKey, JSON.stringify(stateadd)) // Make key be unique.
}
}
console.log(localStorage)
Try this!
var DB = function(){
this.Read = function(index){
return JSON.parse(localStorage[index]).data;
};
this.Write = function(index, data){
localStorage[index] = JSON.stringify({data : data});
};
this.Test = function(){ // test support localStorage!
return typeof localStorage == typeof {};
};
this.Clear = function(index){
if(typeof index === "undefined"){
localStorage = {};
} else {
localStorage[index] = JSON.stringify({data : []});
}
};
}
// example:
var x = new DB(); // new data base
if(!x.Test()) alert('Error!'); // not support!
x.Write('food', ['food','bar','google']); // write data
console.log(x.Read('food')); // get data!
x.Clear('food'); // clear data!
console.log(x.Read('food')); // get data!

Ionic/Angular: Read and Write Array in Local Storage

I'm working with Ionic framework as part of an online course I'm taking to learn AngularJS and a great many other tools useful to a web developer. And, being the sort of advanced beginner type, I'm stuck. In this unit, we've learned to leverage local storage to persist data locally so we can get our favourite items even after the app is shut down. However, I have trouble getting that to work.
So here's what I've done:
The Failed Attempt
I can get data into local storage. And I can append data. I do this using this function:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
In local storage, this produces the following entry:
favorites: ["'{id':0},","'{id':1},"]
So far so good. However, this is useless. Because I need this object to have the following format:
favorites: [{'id':0}, {'id':1}]
and so on. Also, I should not be able to add duplicates. I have a kind of function for that elsewhere, but I am stuck on how to combine the two functions.
The function I have is this:
function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index)
return;
}
favorites.push({
id: index
});
};
The problem with this is, I don't understand how it does what it does.
So please, help?
EDIT #1:
The Second Attempt
With the help of #Muli and #It-Z I'm working with the following code right now:
$scope.favoriteData = $localStorage.getObject('favorites', '[]');
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};
However, this doesn't work because with a nonexistant key favorites, it doesn't work and gives me an error. So I need to implement a check if the key exists and if it doesn't, then it should create one. I've looked at this question, but it didn't work, mainly because I must use the following factory in services.jsto access local storage:
.factory('$localStorage', ['$window', function ($window) {
return {
store: function (key, value) {
$window.localStorage[key] = value;
},
get: function (key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
storeObject: function (key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function (key, defaultValue) {
return JSON.parse($window.localStorage[key] || defaultValue);
}
}
}])
So this is where I'm at right now. And I'm still stuck. Or again stuck. I don't know.
$localStorage handles serialization and deserialization for you so there's no need for $scope.favoriteData = $localStorage.getObject('favorites', '[]');
You can just call:
$scope.favoriteData = $localStorage.favoriteData || {/*Defaults object*/};
Same goes for saving data. use the dot notation.
Check the demo.
As for the duplicates: just handle them yourself like you would normally. when you're done call $localStorage.mySet = modifiedSet (modified set is standard JS object).
Note: this assumes you use ngStorage.
First of all, this line:
$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
Should be:
$scope.storeVar = $scope.favoriteData.push({id: index});
This is because in the original line you are pushing string into favoriteData while you wanted objects.
And if you want to check first for duplicates your can go with somthing like this:
$scope.favoriteData = $localStorage.getObject('favorites', []);
$scope.addFavorite = function (index) {
console.log('Current Favorites', $scope.favoriteData);
$scope.favoriteData = Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
console.log ($scope.favoriteData);
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
console.log ("Found duplicate id " + favorites[i].id);
return;
}
}
$scope.storeVar = $scope.favoriteData.push({id: index});
console.log ($scope.favoriteData);
$localStorage.storeObject('favorites', $scope.favoriteData);
console.log('Added Favorite', $scope.favoriteData)
};

Can't update javaScript global variable

Here I have global variable userId, and i want to update it inside signInUserFunction(), to use is in other function. I have tried to define it using var, window, But all these didn't help. This variable doesn't update. As i see its about AJAX async. So, what can i do with it?
And yes, I know that its not good to make authentication with JS, I am quite new to it. So, I am just creating random methods to improve.
var userId = 1;
function signInUser() {
$.getJSON('http://localhost:8887/JAXRSService/webresources/generic/getAllUsers', function(data) {
var items = [];
var i = 0;
$.each(data, function(firstname, value) {
var str = JSON.stringify(value);
data = JSON.parse(str);
var innerId;
for (p in data) {
innerId = data[p].id;
if ($('#nameSignIn').val() == data[p].first_name && $('#passwordSignIn').val() == data[p].password) { //
userId = innerId;
window.location.href = "content.html";
break;
} else {
i++;
if (i == data.length) {
alert("Ощибка в логине или пароле!")
}
}
}
});
});
}
How are you determining whether or not it has been set? It looks like immediately after you set it, you navigate to a different page. When you get to that page, you will have an entirely new window.
Try alerting the value before navigating away.
EDITED: Here is how you could pass it to the other page (but you shouldn't do this in a real app)
window.userId=innerId;
alert(window.userId);
//this isn't a very secure way to do this. I DON'T recommend this
window.location.href = "content.html?id=" + innerId ;
Then in the other page, you could access it off the document.location:
alert(document.location.toString().split("?id=")[1]);
After reading my comments, you may want to try this:
var userId = 1;
function signInUser(){
$.getJSON('http://localhost:8887/JAXRSService/webresources/generic/getAllUsers', function(data){
var items = [], actors = data.Actors, l = 0;
$.each(actors, function(i, o){
l++;
if($('#nameSignIn').val() === o.first_name && $('#passwordSignIn').val() === o.password){
userId = o.id;
// this will redirect before any other code runs -> location = 'content.html';
if(l === actors.length){
alert('End of Loop');
}
}
});
});
}
signInUser();
I would not store sensitive data in JSON such as passwords. Use a database. There is no need to get all the data at the same time either.
Using the idea #mcgraphix proposed (and giving you the same warning...this would certainly not be the way to transfer data like this in a production environment), here is one way to do it:
function signInUser() {
var url = 'http://localhost:8887/JAXRSService/webresources/generic/getAllUsers';
var userId;
$.getJSON(url, function(data) {
$.each(data.Actors, function(index, actor) {
// Cache the values of the #nameSignIn and #passwordSignIn elements
var name = $('#nameSignIn').val();
var password = $('#passwordSignIn').val();
if (actor.first_name === name && actor.password === password) {
// We have found the correct actor.
// Extract its ID and assign it to userId.
userId = actor.id;
window.location.href = "content.html?userId=" + userId;
}
});
// This alert should only be reached if none of the actor objects
// has a name and password that matches your input box values.
alert("Ощибка в логине или пароле!");
});
}
// On the next page...
// Top answer from http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript
// This approach can handle URLs with more than one query parameter,
// which you may potentially add in the future.
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', variable);
}
var userId = getQueryVariable('userId');
Thanks you for help.Ended it all with usage of:
sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')

Recursively search JSON and delete certain sub objects

I need to search a complex json object recursively, and delete the object associated with any key that starts with "_".
So far, I have:
sanitize: function(json){
for(var i in json){
if(json[i]){
if(i.substring(0,1) == "_")
delete json[i];
else
this.sanitize(json[i]);
}
}
console.log(json);
return json;
}
I exceed the maximum call stack.
Try using your own array, and also make sure the subobjects aren't circular references, and also make sure they're objects.
function sanitize(json) {
var stack = [];
var done = [];
do {
for(var x in json) {
if(x.charAt(0) === '_') {
delete json[x];
} else if(done.indexOf(json[x]) === -1 && typeof json[x] === 'object') {
stack.push(json[x]);
done.push(json[x]);
}
}
} while(json = stack.pop());
}

Categories

Resources