Retrieve a key value from JSON

Question

I've got a Calendar. Inside its code there's an Object and a JSON to it, which contains several properties such as

   [{"Date":"17-3-2015","Event":"Test drive","Participants":"John, George","Description":"Testing a new F30"},
    {"Date":"17-3-2015","Event":"Football match","Participants":"FCSM vs FCKK","Description":"New season start"},
    {"Date":"25-3-2015","Event":"Jane's Birthday","Participants":"Jane, John, Richard, Alice","Description":"Celebration with my friends"}]

But since that data is in localStorage I retrieved it via

var existEvents = JSON.parse(localStorage.getItem('events'));
for(i=0; i<existEvents.length; i++) {
    var item = localStorage.getItem(localStorage.key(i));
    console.log(item);
};

existEvents = every new event in my Calendar

console.log(item); returns me the data typed above.

What I need is to retrieve every Date value (= key). So I pretend that

 item.Date

must work, but it doesn't. As well as

item[0].value

I tried it after having read this question + answers Access / process (nested) objects, arrays or JSON

What am I doing wrong? Please, help!

score 3 · Accepted Answer · edited Mar 03 '15 at 21:40

A good way to use the Array.ForEach(), where it can be also used to loop on objects having the value as the first parameter and the key (if exists) in the second. In your example the for each takes this array, and loops on it retrieving one object at a time.

This object has a Date key in it, so you can access it using the obj.key. However, it is always good to use the .hasOwnProperty to check if the key exists first.

You can also use the forEach to loop through the object keys and then you will be able to have the obj/key. For example, looping on every obj from the array loop will give you obj => 17-3-2015 | key => Date ... etc.

var x =  [{"Date":"17-3-2015","Event":"Test drive","Participants":"John, George","Description":"Testing a new F30"},
        {"Date":"17-3-2015","Event":"Football match","Participants":"FCSM vs FCKK","Description":"New season start"},
        {"Date":"25-3-2015","Event":"Jane's Birthday","Participants":"Jane, John, Richard, Alice","Description":"Celebration with my friends"}];

x.forEach(function(obj,key){console.log(obj.Date) });

Your code can be:

JSON.parse(localStorage.getItem('events')).forEach(function(obj,key){console.log(obj.Date) });

Nice short solution. Note, hoverer, that `Array.prototype.forEach` is only supported in IE 9+. — Robbie Wxyz, Mar 03 '15 at 21:39
This answer is only short it is written all on one line. What is the advantage of using a foreach with an anonymous function when a for loop will suffice? — bhspencer, Mar 05 '15 at 19:56

score 1 · Answer 2 · answered Mar 03 '15 at 21:32

I don't think you need to be going back into localstorage inside your for loop since you already have all of your data in the variable existEvents.

var existEvents = JSON.parse(localStorage.getItem('events'));
for(i=0; i<existEvents.length; i++) {
    var item = existEvents[i];
    console.log(item);
};

score 1 · Answer 3 · answered Mar 03 '15 at 21:37

The HTML5 LocalStorage is an associative array storage with the getItem function grabbing one of the items. So,

localStorage.getItem ("somekey")

returns whatever variable somekey was set to. In your code snippet, the variable you are storing in the localStorage is a String that happens to be in JSON form. JSON.parse () turns that JSON into the actual array represented by the String you've stored.

var existEvents = JSON.parse (localStorage.getItem ('events'));
for (var i = 0; i < existEvents.length; i++) {
    var item = existEvents [i];
    console.log(item);
};

existEvents is an Array object so you can access it like normal. After you've retrieved it from localStorage and parsed it, you no longer need to access localStorage.getItem.

Retrieve a key value from JSON

3 Answers3