2

在本地存储中，我有具有以下值的键“结果” ：

[{"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);
}

如何获取 item-3 或特定 ID 的 href？

4

3 回答 3

8

使用原生Array.filter

如果您只针对现代浏览器（IE9+ 或任何其他主要浏览器的最新版本），您可以使用 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，但事实证明，在大多数情况下，循环比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;
于 2011-11-12T05:42:44.850 回答
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）

这是最后一个例子。

编辑

正如无用代码指出的那样，这个方法比本机过滤器功能慢得多（和自定义循环，但我认为引入几行新代码来节省 20-30 毫秒是过大的，除非性能是一个问题），所以我正在更新我的例子不使用 jquery 过滤器。+1请他回答。

另外，这里要指出的重要一点是，如果这个数组有数百个而不是 8 个书签，那么从统计上来说，for 循环可能会快两倍（因为它不必遍历数组的其余部分）。但是，在这种情况下，将 for 循环放入返回第一个满足条件的项目的函数中可能是一个好主意，并且使用prototypejs，它甚至可以连接到数组。

于 2011-11-11T23:26:56.207 回答
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循环”方法”！！）

于 2011-11-12T19:43:39.100 回答