2

localstorage には、次の値を持つキー「結果」があります。

[{"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+ またはその他の主要なブラウザーの最近のバージョンfilter) のみをターゲットにしている場合は、JavaScript 1.6 配列メソッド を使用できます。

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を含むオブジェクトを格納します。hreficon

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 を取得する必要があります)。

これは最後の例です。

編集

Useless Code が指摘したように、このメソッドはネイティブ フィルター関数よりも大幅に低速です (およびカスタム ループですが、パフォーマンスが問題でない限り、20 ～ 30 ミリ秒を節約するためにいくつかの新しいコード行を導入するのはやり過ぎだと思います)。そのため、私の例を更新しています。 jquery フィルターを使用しないようにします。そのための彼の答えを+1してください。

また、ここで指摘しておくべき重要なことは、この配列にブックマークが 8 個ではなく数百個ある場合、for ループはおそらく統計的に約 2 倍速くなります (残りの配列を反復処理する必要がないため)。しかし、その場合、条件を満たした最初に見つかった項目を返す 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 に答える