I have saved an array in local storage and trying to use it but when I console.log the localstorage.getitem it returns [object HTMLDivElement] I have tried to use .innerhtml or [...] on it but they didn't work. Btw, since it's an array, I have to use JSON.stringify(movieWatchlistArray):
localStorage.setItem("key",JSON.stringify(movieWatchlistArray))
let str =localStorage.getItem("key")
console.log(JSON.parse(str) )
But when I do this, it will return an empty object inside an array while when I console.log the original array it's fine so I tried to do it without JSON part, it worked but returns a string of [object HTMLDivElement]
localStorage.setItem("key",movieWatchlistArray)
let str =localStorage.getItem("key")
console.log(str)
So how to get the content of [object HTMLDivElement] I have used .innerhtml but it says can't use .innerHTML on undefined .
when you trying to save an element in localstorage you should save the .outerHTML of it, not the element itself. although it's not recommended to save the whole HTML in local storage instead save the data as an object and use it in js to render the HTML.
so in this case it will be :
movieWatchlistArray.unshift(document.querySelector(`.movie--${moviePageNumber-1}`).outerHTML)
Related
I'm trying to assign a JSON array from a URL to a variable. Here's my code:
$.getJSON("tljson.json",function(result){
var items = [];
items.push(result);
});
However, 'alerting' the items only returns
[object Object],[object Object],[object Object],[object Object]
What am I doing wrong?
What you're doing wrong is alerting the result. You have an array of four objects, but alert only shows the default text representation of objects, [object Object]. Convert your data to string yourself before printing. For example, instead of alert(result), you can try alert(JSON.stringify(result)).
Also, alert is ugly, annoying and hard to use; if you can, use console.log() and its friends instead, much easier on the programmer. Check the results in the JavaScript console. (This is under the assumption the alert() was for your own debugging benefit; if it's for users, try doing something in HTML instead.)
It already is a variable, result is the json response that you can access the same way you would if you pushed it to items.
I want to do something like this in Prototype:
onSuccess: function(transport) {
template = transport.responseText.evalJSON();
form = event.up('form');
form.select('.audio_channels').update(template.channelHtml);
}
The form tag is a table, and I want to replace its contents. channelHtml is a string of HTML <tr> tags.
I'm getting:
TypeError: Object [object HTMLTableElement] has no method 'update'
So I figure it's not an extended object and tried Element.extend(form.select('audio_channels')), which returns an empty object. Then I try form.select('.audio_channels').innerHTML(template.channelHtml) and I get TypeError: Object [object HTMLTableElement] has no method 'innerHTML'. Then I try with the tbody element and I get [object HTMLTableSectionElement] has no method 'innerHtml'
This seems to me like it should work. form.select('audio_channels') is returning the correct DOM element. What do I need to do to set the content of the table based on my ajax call?
Replace the last line with
form.select('.audio_channels').each(function(node){
node.update(template.channelHtml);
});
That will execute the code on the actual element instead of a one-item array as the original code was doing.
I know you can get all the elements by a $("*") command using jQuery, but then suppose I wanted to traverse that list and pull a certain element from that list, how do I find that item? All I get from that is [object Object]. How do I look inside that object set?
Also, does the $("*") grab all of the attributes associated with each element? If not, how do I get those as well.
My purpose is this, if I modify some data using the "Inspect Element" thing in Chrome, I want to get all of the HTML of the page, after the modifications have been made, so as to essentially get a copy of the new HTML page.
I wanted to traverse that list and pull a certain element from that
list, how do I find that item? All I get from that is [object Object].
How do I look inside that object set?
You would use jQuery.each()
Also, does the $("*") grab all of the attributes associated with each
element?
Yes it does.
Example:
$("*").each(function(i, v){
// get tag name
console.log($(this).get(v).tagName); // or nodeName
// get node type
console.log($(this).get(v).nodeType);
// based on element type, you can get attributes using attr()/prop()
});
In the console you get sometimes [object Object]. To look inside the object set type:
console.dir($('*'));
Now you can 'open' the object in your console.
If you want to look for an element and your are not sure, if the element exists you can also:
if ($('#IDofTheElement').length > 0) { // Do something with it }
I am using JSON.parse to parse this JSON string
[{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}]
However I am simply getting this result as the output:
[object Object]
Which shouldn't be the result. I am using this within the Cappuccino framework. Does anyone know what I am doing wrong here?
[object Object] is what objects display when you call toString on them. It looks like you're taking your result and trying to call obj.toString()
Also, your JSON is an array with one element in it, so to verify that your result is correct, you can access the name property on the [0] index:
obj[0].name // should be "joe".
var text = '[{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}]';
var obj = JSON.parse(text);
alert(obj[0].name); //alerts joe
DEMO
Or get rid of the array, since it's not really doing much
var text = '{"created_at":"2012-01-24T22:36:21Z","name":"joe","age":42,"updated_at":"2012-01-24T22:36:21Z"}';
var obj = JSON.parse(text);
alert(obj.name); //still joe
DEMO
This is an array because it's in square brackets - [] - remove these and it should work...
Even though this is 'syntactically' correct the parser sees this as an array (which is a type of object) but won't do the work on it the way you'd expect.
Also for future reference:
Try to lint it, and see if your syntax is messed up: http://jsonlint.com/
This is an old subject, but nonetheless, I spent hours trying to figure out what was going on. So, hopefully this will help someone else in the future.
My issue was setting up a simple ajax call, and doing something with the resultset from said ajax call. However, no matter what I did, I couldn't get the json resultset to an object.
I ended up stepping through everything in the debugger window and noticed old code that was no longer active was showing up on the sidebar (dom detail). So, my data had been cached. I cleared the cache, and boom! Everything worked.
I searched for this topic, and I can't seem to find the right way to parse the JSON string to read the objects.
Here is my code
$.getJSON("<url>",
function(data) {
alert("success!"+data);
});
outputs:
success![object Object],[object Object],[object Object],[object Object]
Firebug shows correct response, and when I click JSON tab I see all the objects.
Thanks!
When a JSON string is parsed, it is turned into a Javascript object. If you use a string method on an object, the string [object Object] is returned.
You need to use object property access methods instead (e.g. alert(data.somekey);).
Don't use alert() for debugging in cases like this if you have Firebug available. Use console.log(data) and you will get direct insights into your JSON data.
In this case you'd have realized that there's absolutely nothing wrong :D .
JSON = JavaScript Object Notation precisely because it is the way to declare object literals in JavaScript. The data parameter is already a Javascript object (in your case an array of objects) that you can access as:
data[index].fieldname
enter your json string here, and click on the created tree view On the top left you will see how you can access it
link text