Localstorage: Get Specific Localstorage Value Of Which Contains Many Items

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':'i

Solution 1:

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/filtervar ret = data.filter(function (item) {
        return item.id === id;
    });

    // Return the first item from the filtered array   // returns undefined if item was not foundreturn 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) {
            returndata[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.

vardata = {
    "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;

Solution 2:

jQuery has filter helper for that:

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

Function for href of item with specific id would be:

functiongetItemHrefById(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 3:

for the jquery filter method, I think using a callback function, and bind the search parameter is more elegant and readable:

functionfilterById(id, i, obj) {
    return obj.id === id;
}

functiongetItemHrefById(json, itemId) {
    return $(json).filter(filterById.bind(null, itemId))[0].href;
}

da usual fiddle

(however, i prefer the "for loop" approach" for this!!)