在本地存储中,我使用值键<'strong>结果':
[{"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"}]
要获得我使用的最后一项:
// 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);
}
如何获取第3项或特定ID的href?
答案 0 :(得分:8)
Array.filter
如果您只定位现代浏览器(IE9 +或任何其他主要浏览器的recent version),则可以使用JavaScript 1.6数组方法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');
如果你不能使用过滤器,你可能只是使用一个循环:
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');
即使使用循环强制它可能看起来不如使用Array.filter
那么优雅,但事实证明在大多数情况下loop is faster than Array.filter
。
假设每个项目的id
都是唯一的,那么最好的解决方案就是重构您存储数据的方式。使用id
作为键来存储包含href
和icon
键/属性值的对象的对象,而不是对象数组。
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"}
};
这样可以更轻松,更快捷地访问项目:
var data = JSON.parse(localStorage.getItem("result"));
data["item-3"].href;
答案 1 :(得分:1)
jQuery有过滤器助手:
$(result).filter(function(){return this.id == "item-3";})[0]
具有特定id的项目的href函数将是:
function getItemHrefById(json, itemId){
return json.filter(function(testItem){return testItem.id == itemId;})[0].href;
}
样本用法是:
var href = getItemHrefById(result, "item-3");
您可以在http://jsfiddle.net/LXvLB/
上查看工作示例<强>更新强>
如果您无法从本地存储中读取项目,可能在设置值时忘记调用JSON.stringify:
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"}])
您需要将json转换为字符串才能正确序列化(并使用JSON.parse来获取JSON)
This是最后的例子。
修改强>
正如无用代码指出的那样,这个方法比本机过滤器功能慢得多(和自定义循环,但我认为引入几行新代码来节省20-30ms是不合适的,除非性能是个问题),所以我是更新我的示例不使用jquery过滤器。请为他的答案+1。
此外,重要的是要指出,如果这个数组有数百个而不是8个书签,for循环可能在统计上大约快两倍(因为它不必遍历数组的其余部分)。但是,在这种情况下,将循环放入函数可能是一个好主意,该函数返回满足条件的第一个找到的项,并且使用prototypejs它甚至可以连接到数组。
答案 2 :(得分:0)
对于jquery过滤器方法,我认为使用回调函数,并且绑定搜索参数更优雅和可读:
function filterById(id, i, obj) {
return obj.id === id;
}
function getItemHrefById(json, itemId) {
return $(json).filter(filterById.bind(null, itemId))[0].href;
}
(但是,我更喜欢“for loop”方法“为此!!)