localstorage: Get specific localstorage value of which contains many items

Question

In localstorage I have key 'results' with this values:

[{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}]

To get the last item I use this:

// this is how I parse the arrays
var result = JSON.parse(localStorage.getItem("result")); 


for(var i=0;i<result.length;i++) {
    var item = result[i];
    $('element').val(item.href);
}

How can I get the href for item-3 or for a specific ID?

Solution 1

jQuery has filter helper for that:

$(result).filter(function(){return this.id == "item-3";})[0]

Function for href of item with specific id would be:

function getItemHrefById(json, itemId){
    return json.filter(function(testItem){return testItem.id == itemId;})[0].href;
}

And sample usage is:

var href = getItemHrefById(result, "item-3");

You can see working example on http://jsfiddle.net/LXvLB/

UPDATE

If you cannot read item from local storage, maybe you forgot to call JSON.stringify when setting value:

localStorage["results"] = JSON.stringify([{"id":"item-1","href":"google.com","icon":"google.com"}, 
{"id":"item-2","href":"youtube.com","icon":"youtube.com"}, 
{"id":"item-3","href":"google.com","icon":"google.com"}, 
{"id":"item-4","href":"google.com","icon":"google.com"}, 
{"id":"item-5","href":"youtube.com","icon":"youtube.com"}, 
{"id":"item-6","href":"asos.com","icon":"asos.com"}, 
{"id":"item-7","href":"google.com","icon":"google.com"}, 
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}])

You need to convert json to string to be properly serialized (and to use JSON.parse to get JSON back)

This is final example.

EDIT

As Useless Code pointed out, this metod is substantially slower than native filter function (and custom loop but I think that introducing few new lines of code to save 20-30ms is overkill unless performance is a issue), so I'm updating my example to not use jquery filter. +1 please for his answer for that.

Also, what is important to point out here, if this array would have hundreds instead of 8 bookmarks, for loop would probably be statistically about twice faster (as it does not have to iterate through rest of the array). But, in that case it would probably be a good idea to put for loop into function which returns first found item which satisfies condition, and with prototypejs it probably can even be hooked up to array.

Solution 2

Using native Array.filter

If you are targeting only modern browsers (IE9+ or a recent version of any other major browser) you can use the JavaScript 1.6 array method filter.

var testItem,
    data = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];

function getItemById(data, id) {
    // filter array down to only the item that has the id
    // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter
    var ret = data.filter(function (item) {
        return item.id === id;
    });

    // Return the first item from the filtered array   
    // returns undefined if item was not found
    return ret[0];
}


testItem = getItemById(data, 'item-3');

Working example

Manually looping over the data

If you can't use filter you are probably stuck with just using a loop:

var testItem,
    data = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];

function getItemById(data, id) {
    var i, len;
    for (i = 0, len = data.length; i < len; i += 1) {
        if(id === data[i].id) {
            return data[i];
        }
    }

    return undefined;
}

testItem = getItemById(data, 'item-3');

Working example

Even though brute-forcing it with a loop might seem less elegant than using Array.filter, it turns out that in most cases the loop is faster than Array.filter.

Refactoring to an object instead of an array

The best solution, assuming that the id of each of your items is unique, would be refactoring the way you are storing the data. Instead of an array of objects, use an object that uses the id as a key to store an object containing the href and icon key/property values.

var data = {
    "item-1": {"href": "google.com", "icon": "google.com"},
    "item-2": {"href": "youtube.com", "icon": "youtube.com"},
    "item-3": {"href": "google.com", "icon": "google.com"},
    "item-4": {"href": "google.com", "icon": "google.com"},
    "item-5": {"href": "youtube.com", "icon": "youtube.com"},
    "item-6": {"href": "asos.com", "icon": "asos.com"},
    "item-7": {"href": "google.com", "icon": "google.com"},
    "item-8": {"href": "mcdonalds.com", "icon": "mcdonalds.com"}
};

This would make accessing items even easier and faster:

var data = JSON.parse(localStorage.getItem("result")); 
data["item-3"].href;