sessionStorage.setItem with JSON.stringify causes javascript function to fail - javascript

I am storing two items in sessionStorage, an integer and a string array. I can see the items in Chrome Dev Console (Application - sessionStorage) and they are correct.
The values as it shows now in the Chrome Dev Console are:
HTTP_Index 4
HTTP_History ["Start","text_14","text_7","text_10"]
In a javascript function, I retrieve them from sessionStorage:
var HTTP_Index = sessionStorage.getItem(HTTP_Index);
var HTTP_History = sessionStorage.getItem(HTTP_History);
p_Index = JSON.parse(HTTP_Index);
p_History = JSON.parse(HTTP_History);
I decrement the index:
p_Index = p_Index - 1;
console.log("HTTP_Index Now " + p_Index);
and the log shows that the value is now 3.
Next I store the value p_Index back to sessionStorage:
sessionStorage.setItem("HTTP_Index", JSON.stringify({ "p_Index" });
Whether I enclose p_Index in quotes or not, the dev console now shows the function as "undefined."
Next I tried to do it like this:
sessionStorage.setItem("HTTP_Index", JSON.stringify({ "p_Index" });
but same problem. So finally I tried this:
var obj = { HTTP_Index: p_Index };
var objJSON = JSON.stringify(obj);
sessionStorage.setItem(objJSON);
But the Chrome dev console shows:
Uncaught TypeError: Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.
What am I doing wrong in using JSON.stringify for sessionStorage.setItem?
Thanks for any help.


When using .setItem you must set a key, and then the value you want to store.
In the case of your first example, you're doing this but have made a simple typo. Also you want to stringify the contents in p_Index, not the string "p_index", so, you need to remove your quotes around it when stringifying:
sessionStorage.setItem("HTTP_Index", JSON.stringify(p_Index)); // <-- missing this closing bracket
And so you'll get a syntax error here.
In the case of your second example (attempt), you're not using valid syntax as you're setting an object with no value.
In your third example, you're trying to set the value to be the stringified object (so your value is just the string, not the object), and so you're not specifying a key. To do this you can use:
var objJSON = JSON.stringify(p_index);
sessionStorage.setItem("HTTP_Index", objJSON);


In your latest example:
var obj = { HTTP_Index: p_Index };
var objJSON = JSON.stringify(obj);
sessionStorage.setItem(objJSON);
sessionStorage.setItem first argument must be the key which you want to set and the 2nd is the data which you are going to store.
So you miss the key/name.

Related

What is a PoliglotMap in GraalVM?

I am working with the org.graalvm.polyglot script engine in my Java11 project to evaluate a JavaScript.
The script to be evaluated returns a JavaScript array with two entries.
...
var result={};
result.isValid=false;
result.errorMessage = new Array();
result.errorMessage[0]='Somehing go wrong!';
result.errorMessage[1]='Somehingelse go wrong!';
....
In my java code I try to evaluate the result object:
Value resultValue = context.getBindings(languageId).getMember("result");
In my Eclipse Debugger I can see that I receive a PolyglotMap containing the expected values:
I can iterate over that map to get the values with a code like this:
...
try {
mapResult = resultValue.as(Map.class);
} catch (ClassCastException | IllegalStateException | PolyglotException e) {
logger.warning("Unable to convert result object");
return null;
}
Iterator it = mapResult.entrySet().iterator();
while (it.hasNext()) {
Map.Entry pair = (Map.Entry) it.next();
String itemName = pair.getKey().toString();
Object itemObject = pair.getValue();
...
In this way I am able to extract the boolean 'isValid'. But with the object 'errorMessage' I struggle.
Inspecting the Object again within the Eclipse Debugger it looks like this:
If I test this object it is an instanceOf Map. But I am unable to get any of the values out of this object.
Can anybody help me to understand what exactly this object represents and how I can extract the both values 'Someting go wrong!' and 'Sometingelse go wrong!' ?
When I iterate over this second map it seems to be empty - even if the debugger shows me the correct values.

I'm not 100% sure why as(Map.class) behaves that way, it might be worth creating an issue on github to figure it out: github.com/oracle/graal
But if you access the values using the API without converting to a Map it would work as you expect:
var errorMessage = resultValue.getMember("errorMessage");
errorMessage.hasArrayElements(); // true
var _0th = errorMessage.getArrayElement(0);
var _1th = errorMessage.getArrayElement(1);
You can also convert the polyglotMap to Value and then do it:
val errorMessage = context.asValue(itemObject);
errorMessage.hasArrayElements(); // true
errorMessage.getArrayElement(0);
PolyglotMap of course has the get method. And the Value javadoc says that:
Map.class is supported if the value has Value.hasHashEntries() hash entries}, members or array elements. The returned map can be safely cast to Map. For value with members the key type is String. For value with array elements the key type is Long.
Can you try getting them with the Long keys?
There might be something obvious I'm missing, so in any case it's better to raise an issue on GitHub.

Array has only 4 elements but it shows like it has 5 elements even after removing empty elements

I have an array with 4 elements and in one scenario I want to pop one element from the array. But after pop array gives the same result as before.
I have checked in the console window and there I have find a different behavior like array length is 4 and it shows like it has 5 elements.
I have tried to remove the empty elements also but still the same issue is coming .
var brudcrumbDataArray=JSON.parse(brudcrumbDataString);
brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined });
console.log(brudcrumbDataArray)
brudcrumbDataArray.pop();
console.log(brudcrumbDataArray)
Her is the array :
[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]
After pop also array gives the same data and same length. Can someone help me to solve this issue ?
Snippet, check your console to see the problem:
var brudcrumbDataString =`[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]`;
var brudcrumbDataArray=JSON.parse(brudcrumbDataString);
brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined });
console.log(brudcrumbDataArray)
brudcrumbDataArray.pop();
console.log(brudcrumbDataArray)

A result on the console seems to be correct. Both the logs on the console window are showing the result after the operation. Why is the first log showing a result in it? because, in javascript, complex objects get stored by reference, that's why your first log does show a result in it too.
Store by reference? what does it mean? : https://docstore.mik.ua/orelly/webprog/jscript/ch04_04.htm
Try below one,
var brudcrumbDataString =`[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]`;
var brudcrumbDataArray=JSON.parse(brudcrumbDataString);
brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined });
console.log(JSON.parse(JSON.stringify(brudcrumbDataArray)))
brudcrumbDataArray.pop();
console.log(JSON.parse(JSON.stringify(brudcrumbDataArray)))
Look closely here, we are doing deep data copy with using JSON operations, by surrounding object in JSON.parse(JSON.stringify( )) and it won't point to reference anymore now.
And log will be more clear as below,

it showing because the reference to the same object so when you pop last element the object get modified and shows the length as 4 so the first consoled object also get updated.
var brudcrumbDataArray = [{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]
//var brudcrumbDataArray=JSON.parse(brudcrumbDataString);
var newBrudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined });
console.log(brudcrumbDataArray)
newBrudcrumbDataArray.pop();
console.log(newBrudcrumbDataArray)

Js split function giving wrong result

I was trying to split this string through "##" delimitter.
var historycookie = "8.4707417,77.0463719:Sector 14:Gurgaon##28.3952729,77.3238274:Sector 15:Faridabad";
var history = historycookie.split("##");
alert(history.length);alert(history[0])
The history.length alert is giving me result as 6.
But ideally it should be 2.
The history[0] alert is giving undefined. Please help me with this as I am not able to get why this is happening.

"History" (or even "history") is a defined by the browser and representing your history.
history.length; // is returning size of entries in your history
history[0]; // undefined, because it is not an array
Just change the name of the history variable.

Object has no method 'replace'

I'm try to run this function, which grabs all the checked checkbox values in to a comma separated string, and converts "," in to ", ", so it reads better. The problem is I'm getting a strange error:
$('.name_boxes').live('click', function() {
var all_boxes = $('.name_boxes');
var all_boxes_values = []
for (var i = 0; i < all_boxes.length; i++) {
if (all_boxes[i].checked) {
all_boxes_values.push(all_boxes[i].value)
}
}
var all_boxes_values_clean = all_boxes_values.replace(/,/g,", ");
alert(all_boxes_values_clean);
});
The console error says:
Uncaught TypeError: Object Aaron Ramsey,Aaron Renfree has no method 'replace'.
I'm not getting the alert box.
This is a bit beyond me, can anybody explain what I'm doing wrong?

Although alert(some_array) prints a string representation of the array, the array itself is not a string. Thus, it does not have .replace. alert is forced to convert it into a string because the alert box can only show characters.
You can simply join using a custom separator, though. join is a function of arrays:
var all_boxes_values_clean = all_boxes_values.join(", ");
As a side note, I recommend console.log over alert because it:
shows the actual object/array instead of a string representation (especially useful with objects instead of the useless [object Object] you receive with alert)
frees you from closing the popup each time
keeps track of other logs so that you have an actual log of logs

all_boxes_values is an array, not a strings and thus it has no replace method.
Try
var all_boxes_values_clean = all_boxes_values.join(", ");
If you insist on performing regular expressions, convert an array to string first: all_boxes_values.toString().

JSON parsing and printing JSON object with variable name

I'm having trouble printing an object with a variable name. It works when I hard code it.
var objectVarName = "lat";
var obj = jQuery.parseJSON(JSON.stringify(msg));
// {"lat":"93"} is what JSON.stringify(msg) prints
$('#display').prepend("<br/><br/>" + JSON.stringify(msg));
//obj['lat'] works, obj[objectVarName] does not
$('#display').prepend("<br/><br/>" + obj['lat']);

Double check that your variable name, casing, etc are correct...your code works if msg is a valid object, here's what I tested:
var msg = {"lat":"93"};
You can test/see the result here, I changed .prepend() to .append() so the output is in order, no other changes besides that, the result is:
{"lat":"93"}
93

Categories