We Keep Coding

How to fix my Bookmark local-storage service

My Bookmark Service which stores a result item with JSON structure doesn't work well.
Probably the issue comes from the array that doesn't work with the local storage function.
I've tried to JSON.stringify my items.
var key = 'fud_bookmarks';
var bookmarks = [];
this.addBookmark = function(resultItem) {
var bookmarks = this.getBookmarks();
bookmarks.push(resultItem);
return setBookmarks(bookmarks);
};
this.deleteBookmark = function(resultItem) {
var bookmarks = this.getBookmarks();
var i = bookmarks.indexOf(resultItem);
if (i >= 0) {
bookmarks.splice(i, 1);
console.log(bookmarks)
return setBookmarks(bookmarks);
}
return false;
};
this.getBookmarkCount = function() {
return getBookmarks().length;
};
this.getBookmarks = function() {
var bookmarks = localStorage.getItem(key);
if (!bookmarks) {
bookmarks = [];
}
return bookmarks;
}
function setBookmarks(bookmarks) {
return localStorage.setItem(key, bookmarks);
}
The resulted items look like this.
{
id: "112",
docType: "doctyp117",
title: "Abschließender Bericht über die Arbeit des Kunsts…- September 1944, Exemplar für Tieschowitz, o.D.",
type: "Archivbestand",
description: null,
…
}
$$hashKey: "object:455"
archive: {
id: "24",
title: "Familienarchiv der Grafen Wolff Metternich zur Gracht"
}
right now I get this error in the console =>
bookmarks.push is not a function
at Object.addBookmark (bookmark.js:12)

localStorage store a string values, not an objects.
If you want to store an Array should stringify it.
function setBookmarks(bookmarks) {
return localStorage.setItem(key, JSON.stringify(bookmarks));
}
this.getBookmarks = function () {
var bookmarks = JSON.parse(localStorage.getItem(key));
...
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
If value in starage will be not a valid JSON JSON.parse method throw an error, so you can use a try catch to avoid errors:
this.getBookmarks = function () {
var bookmarks;
try {
bookmarks = JSON.parse(localStorage.getItem(key));
} catch (e) {
bookmarks = [];
}
...
deleteBookmark should looks like:
this.deleteBookmark = function (resultItem) {
var i = 0;
let bookmarks = this.getBookmarks();
​
for (;i < bookmarks.length - 1;i++) {
if (resultItem.id === bookmarks[i].id) {
break;
}
}
if (i >= 0) {
bookmarks.splice(i, 1);
console.log(bookmarks)
return setBookmarks(bookmarks);
}
return false;
}

Try this: Check if typeof bookmarks is not object then return empty array. As Array is also a special type of object in javascript.
this.getBookmarks = function() {
var bookmarks = localStorage.getItem(key);
if (typeof bookmarks !== "object") {
bookmarks = [];
};
return bookmarks;
};

Add dynamic Parameter to Javascript Array Object by condition

I want to add the parameter to the array object url depends on some function value.
Here is what I have tried so far with no luck.
var change_lookup_number = function() {
var type = document.getElementById('type_number').value;
if (type == 1) {
//url should be "/hello/lookup/modelname.js?columns[column_id]=1"
} else if (type == 2) {
//url should be "/hello/lookup/modelname.js?columns[column_id]=2"
} else {
//url should be "/hello/lookup/modelname.js?columns[column_id]=6"
}
};
change_lookup_number();
var sections = [
{
url: "",
}
]
(function(){
$.each(pcdfs, function(i, section) {
console.log(section.url); // It's empty, I want to change this section.url
}
})();
Thanks

Define sections array before accessing it inside your function.
var sections = [
{
url: ""
}
];
var change_lookup_number = function() {
var type = document.getElementById('type_number').value;
if (type == 1) {
sections[0].url = "/hello/lookup/modelname.js?columns[column_id]=1"
} else {
sections[0].url = "/hello/lookup/modelname.js?columns[column_id]=2"
}
};
change_lookup_number();

Restrict duplicate entries in json localstorage using Javascript

I went through few link, but that didnt help me. I have to restrict duplicate titles in json array. What is way to do here??
function submitForm(){
var titleInput=document.getElementById('titleName').value;
var messageInput=document.getElementById('titleDesc').value;
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
var newItem = {
"title":titleInput ,
"desc": messageInput
};
if(!(titleInput=="" || messageInput=="")){
oldItems.push(newItem);
}
}

Try this:
if (!(titleInput == "" || messageInput == "")) {
var repeated = false;
for (var i = 0; i < oldItems.length; i++) {
if (oldItems[i].titleInput == titleInput) {
repeated = true;
break;
}
}
if (repeated == false) {
oldItems.push(newItem);
}
}

You could simply check wheter the item is there before adding it.
var alreadyExists = oldItems.some(function (item) { return item.title == titleInput; });
if(!(titleInput=="" || messageInput=="") && !alreadyExists) {
oldItems.push(newItem);
}
Then perhaps you should make the concept more explicit by encapsulating that logic within an ItemStore or something similar.
function ItemStore(items) {
this._items = [];
this._titleMap = {};
this.addAll(items || []);
}
ItemStore.prototype = {
constructor: ItemStore,
hasItemTitled: function (title) {
return !!this._titleMap[title];
},
add: function (item) {
var title = item.title;
if (this.hasItemTitled(title)) throw new Error("the store already contains an item titled '" + title + "'");
this._titleMap[title] = true;
this._items.push(item);
},
addAll: function (items) {
items.forEach(this.add.bind(this));
},
items: function () { return this._items.slice(); }
//other useful methods such as itemAt, remove...
};
Then your code becomes as simple as...
var titleInput=document.getElementById('titleName').value;
var messageInput=document.getElementById('titleDesc').value;
var oldItems = new ItemStore(JSON.parse(localStorage.getItem('itemsArray')) || []);
var newItem = {
"title":titleInput ,
"desc": messageInput
};
var shouldAddItem = titleInput != "" && messageInput !="" && !oldItems.hasItemTitled(newItem.title);
if (shouldAddItem) oldItems.add(newItem);
Now obviously, your function is still doing too much since it:
knows how to retrieve and create a new item from the user's input
knows how to rehydrate the item store
knows what to check to validate if an item is valid and should be added or not
You should be reading about the Single Responsability Principle, which isin't only applicable in OO.

jquery script works only on firefox

After 2 weeks of hard work on my first, simple site/database I'm stuck. Friend of mine helped me on adding jquery, but now it works only in Mozilla, and he dont have idea why. I dont know java at all (and barely php). Can you take a look?
Chrome console point an error at
Uncaught SyntaxError: Unexpected token =
at line 49 which is
self.dataAdapter = function(id = 0, imie = '', nazwisko = '', kredyt = 0)
Do you have any idea what is the most compatible syntax?
The whole script:
$(document).ready(function()
{
sui = new swiezakUI();
sui.getData();
});
function swiezakUI()
{
var self = this;
self.scriptURL = "/data.php";
self.send = function(key, stuff)
{
var post = {};
post[key] = JSON.stringify(stuff);
$.ajax({
type: "POST",
url: self.scriptURL,
data: post,
contentType: "application/x-www-form-urlencoded",
dataType: "json",
success: function(data)
{
self.getData();
self.cleanForm();
},
failure: function(errMsg)
{
alert('fail');
},
error: function(errMsg)
{
alert("Blad \n" + errMsg.responseText);
}
});
}
self.id2Id = function(id)
{
for(var i = 0; i < self.myData.length; i++)
{
if(id == self.myData[i].id)
return i;
}
}
self.dataAdapter = function(id = 0, imie = '', nazwisko = '', kredyt = 0)
{
var data = new Object();
data.id = id;
data.imie = imie;
data.nazwisko = nazwisko;
data.kredyt = kredyt;
return data;
}
self.dodajNowy = function()
{
return function()
{
var data = self.dataAdapter(null, $('#imie').val(), $('#nazwisko').val(), $('#kredyt').val().replace(/\D+/g,""));
self.send('nowy',data);
}
}
self.edytujWpis = function(id)
{
return function()
{
var data = self.dataAdapter(id, $('#imie').val(), $('#nazwisko').val(), $('#kredyt').val().replace(/\D+/g,""));
self.send('edycja',data);
}
}
self.kasujWpis = function(id)
{
return function()
{
var data = self.dataAdapter(id);
self.send('kasuj',data);
}
}
self.cleanForm = function()
{
$('#imie').val('');
$('#nazwisko').val('');
$('#kredyt').val('');
$('#bZapisz').unbind();
$('#bZapisz').click(self.dodajNowy());
}
self.editButtons = function()
{
$('.edit').click(function()
{
var did = $(this).attr('id').replace(/\D+/g,"");
id = self.id2Id(did);
$('#imie').val(self.myData[id].imie);
$('#nazwisko').val(self.myData[id].nazwisko);
$('#kredyt').val(self.myData[id].kredyt);
$('#bZapisz').unbind();
$('#bZapisz').click(self.edytujWpis(did));
});
}
self.delButtons = function()
{
$('.delete').click(function()
{
var id = $(this).attr('id').replace(/\D+/g,"");
console.log(id);
self.kasujWpis(id)();
});
}
$('#bZapisz').click(self.dodajNowy());
$('#bCzysc').click(function(){
self.cleanForm();
});
self.getData = function()
{
$('#lista').children('table').html("<tr><th>id</th><th>imie</th><th>nazwisko</th><th>kredyt</th>"+
"<th>edycja</th><th>usun</th></tr>");
$.getJSON(self.scriptURL, function(data)
{
console.log(data);
self.myData = data;
for(var i = 0; i < data.length; i++)
{
$('#lista').children('table').append(
'<tr><td>'+ data[i].id +'</td>'+
'<td>'+ data[i].imie +'</td>'+
'<td>'+ data[i].nazwisko +'</td>'+
'<td>'+ data[i].kredyt +'</td>'+
'<td><button class="edit" id="e#'+data[i].id+'">e</button></td>'+
'<td><button class="delete" id="d#'+data[i].id+'">d</button></td></tr>');
}
self.editButtons();
self.delButtons();
});
}
}

Default parameters are currently part of the ES6 draft. This feature is not part of the most recent final ECMAScript standard (5.1), hence browser support is currently minimal. As of this writing, only Firefox (experimentally) implements default parameters.
There are many ways to simulate default parameters. An alternative to ES6's default parameters would be comparing arg === undefined to set the default value for it:
//if the kredyt argument has not been passed or is undefined
if (kredyt === undefined) {
kredyt = 0;
}
When a function is called passing less arguments than its parameters count, the parameters without corresponding arguments are initialized to undefined.
This way, not passing a value for the argument as well as explicitly passing undefined as the argument value will use the default parameter value, the same behavior as ES6's default parameters.
So here's the complete example:
self.dataAdapter = function(id, imie, nazwisko, kredyt)
{
//default parameters
if (id === undefined) {
id = 0;
}
if (imie === undefined) {
imie = '';
}
if (nazwisko === undefined) {
nazwisko = '';
}
if (kredyt === undefined) {
kredyt = 0;
}
//function code
var data = new Object();
data.id = id;
data.imie = imie;
data.nazwisko = nazwisko;
data.kredyt = kredyt;
return data;
}
Another common approach is comparing arg == null, which has the same effect but also accepts passing null to use the default parameter value:
//if kredyt is null, undefined or not passed
if (kredyt == null) {
kredyt = 0;
}
This works because == does type coercion, and null coerces to, and only to, undefined (ES5#11.9.3).
Yet another common approach is to use the || as the "default operator" (see related question):
kredyt = kredyt || 0; //in the beginning of the function
//...
data.kredyt = kredyt;
Or if the parameter is used only in a single place, it is possible to inline it as well:
data.kredyt = kredyt || 0;
The benefit is basically shorter code, but note that it will use the default parameter value not only when the argument is undefined, but also null, false, 0, empty string or NaN. Hence this is not a viable approach when one of these values is an acceptable parameter value different from its default parameter value.
Lastly, for use cases that need to differentiate a null/undefined value from a not passed argument (which is rare and not the case here), it's possible to check the arguments object's length property:
if (arguments.length < 4) {
kredyt = 0;
}

phonegap save an order at local file system

Hi I am using phonegap to develop a shopping app. I want to give the user an option to save their order and complete wheneven he/she finds convenient. My question where do I save the order data. Local file system or local db of the mobile device? I will like to save the order
in json format in a local file. Please suggest the best option for me. Also a snippet will be highly appreciated. Thanks

You could also use HTML5 localStorage as an easier alternative to file storage. I have been using an encapsulated version of localStorage to facilitate get/set operations and decrease namespace pollution. Please see code base below:
/**
* The class is designed to facilitate flexible permanent storage of key value
* pairs utilzing HTML5 localStorage.
*
* #class LocalMap
* #author Zorayr Khalapyan
* #version 10/25/2012
*/
var LocalMap = function ( name ) {
var that = {};
//Prevent compatability issues in different execution environments.
if ( !localStorage ) {
localStorage = {};
}
if ( !localStorage[name] ) {
localStorage[name] = "{}";
}
var setMap = function ( map ) {
localStorage[name] = JSON.stringify( map );
};
that.getMap = function () {
return JSON.parse( localStorage[name] );
};
/**
* Stores the specified (key, value) pair in the localStorage
* under the map's namespace.
*/
that.set = function ( name, object ) {
var map = that.getMap();
map[ name ] = object;
setMap( map );
};
that.get = function ( name ) {
var map = that.getMap();
return typeof( map[ name ] ) !== "undefined" ? map[name] : null;
};
that.importMap = function ( object ) {
var map = that.getMap();
var key;
for ( key in object ) {
if (object.hasOwnProperty(key)) {
map[key] = object[key];
}
}
setMap(map);
};
that.length = function () {
var map = that.getMap();
var size = 0, key;
for (key in map) {
if (map.hasOwnProperty(key)) size++;
}
return size;
};
that.erase = function () {
localStorage[name] = JSON.stringify({});
};
that.isSet = function (name) {
return that.get(name) != null;
};
that.release = function (name) {
var map = that.getMap();
if (map[name]) {
delete map[name];
}
setMap(map);
};
that.deleteNamespace = function(){
if (localStorage.hasOwnProperty(name)) {
delete localStorage[name];
}
};
return that;
};
LocalMap.destroy = function () {
for ( var item in localStorage ) {
if ( localStorage.hasOwnProperty( item ) ) {
delete localStorage[ item ];
}
}
};
LocalMap.exists = function (name) {
return (localStorage[name]) ? true : false;
};
Below are the unit tests for get and set functions:
test( "Test set()", function() {
var map = LocalMap('test-namespace');
///
map.set("var-1", "val-1");
map.set("var-2", "val-2");
map.set("var-3", "val-3");
//
ok(map.isSet("var-1"), "A variable should be successful set.");
ok(map.isSet("var-2"), "A variable should be successful set.");
ok(map.isSet("var-3"), "A variable should be successful set.");
});
test( "Test get()", function() {
var map = LocalMap('test-namespace');
map.set("var-1", "val-1");
map.set("var-2", "val-2");
map.set("var-3", "val-3");
///
var var1 = map.get("var-1");
var var2 = map.get("var-2");
var var3 = map.get("var-3");
var var4 = map.get("var-4");
//
equal(var1, "val-1", "A set variable should be succesfully retreived.");
equal(var2, "val-2", "A set variable should be succesfully retreived.");
equal(var3, "val-3", "A set variable should be succesfully retreived.");
equal(var4, null, "A variable that was not set should not be retreived.");
});
Hope this helps, and let me know if you have any questions.

How about the below code? I copied it from here. Actually I like its code.
// define dbContext & entities------------------------------------
var DemoDataContext = function () {
nova.data.DbContext.call(this, "Demo", "1.0", "Demo DB", 1000000);
this.users = new nova.data.Repository(this, User, "users");
this.roles = new nova.data.Repository(this, Role, "roles");
};
DemoDataContext.prototype = new nova.data.DbContext();
DemoDataContext.constructor = DemoDataContext;
var User = function () {
nova.data.Entity.call(this);
this.name = "";
this.password = "";
this.birthYear = 1980;
this.createdDate = new Date();
this.deleted = false;
};
User.prototype = new nova.data.Entity();
User.constructor = User;
var Role = function () {
nova.data.Entity.call(this);
this.name = "";
this.createdDate = new Date();
};
Role.prototype = new nova.data.Entity();
Role.constructor = Role;
// end define dbContext & entities------------------------------------
// service methods----------------------------------------------------
function getAllUsers(callback) {
new DemoDataContext().users.toArray(function (users) {
alert(users.length);
callback(users);
});
}
function getUserByName(name, callback) {
new DemoDataContext().users.where("name='" + name + "'").toArray(function (users) {
callback(users.firstOrDefault());
});
}
function addRole(roleName, callback) {
var role = new Role();
role.name = roleName;
var db = new DemoDataContext();
db.roles.add(role);
db.saveChanges(callback);
}
function updateUserPassword(username, password, callback) {
getUserByName(username, function (user) {
if (user == null) {
throw "no user found.";
}
user.password = password;
var db = new DemoDataContext();
db.users.update(user);
db.saveChanges(callback);
});
}
function deleteUserByName(name, callback) {
getUserByName(name, function (user) {
if (user == null) {
throw "no user found.";
}
var db = new DemoDataContext();
db.users.remove(user);
db.saveChanges(callback);
});
}
// end service methods----------------------------------------------------