配列にプッシュする前に多次元配列を検索し、重複データはありません

Question

私は 'wishlist'機能を構築しようとしています。ボタンをクリックすると、特定の「プロパティ」の名前とリンクがローカルストレージの配列に保存されます。私はユーザーのページにこれを出力します。

これまでのところ、私の唯一の問題は、配列にすでに存在していても常にプロパティ名とリンクを挿入するということです。私は小切手を作成し、それがすでにあるかどうかを確認し、見つからなければそれを押してください。

ここには動作するJSFiddleがあります。 "save"ボタンをクリックしてlocalStorageをチェックすると、データが追加されたことがわかります。同じボタンをもう一度クリックすると、もう一度追加されたことがわかります。

https://jsfiddle.net/g9kkx3fh/3/

ここで基本的なコードです。それは、プロパティ名とリンクをクリックした直後のボタンから取得し、localStorageの配列からデータを引き出し、次に.pushを使用して新しいデータを追加し、それを再度ストライピングしてlocalStorageに追加します。

var name = $(this).closest('.text-long').find('.intro-text h4').text(); 
var permalink = $(this).closest('.text-long').find('.button-slot a').attr('href'); 
var property = [name, permalink]; // create an array of the name + permalink 
var wishlist = JSON.parse(localStorage.getItem("wishlist")); // get the wishlist from storage 
wishlist.push(property); // append the new array into the wishlist from storage 
localStorage.setItem('wishlist', JSON.stringify(wishlist)); // put the wishlist back in storage 

私は多次元であること、配列を反復処理し、そして同じname VARを探すために必要な知っていました。だから私はこれで始まった：

for (var i = 0; i < wishlist.length; i++) { 
    var isPresent = ($.inArray(name, wishlist[i])); 
} 
if (isPresent == -1){ 
    wishlist.push(property); 
    localStorage.setItem('wishlist', JSON.stringify(property)); 
} 

これは問題です。 localStorage VAR wishlistが空の場合、そのlengthはwishlistは常に0

あるので、私はこれをどのように修正すればよいのでi < wishlist.lengthは、決して真にはならないので、そのためforループは、働くことはありません0ですか？私のforループは決して動かないので、私はisPresentという値を得ることができないので、配列に何も追加することはできません。

ここで壊れたコードをJSFiddleだが、forループやif文を追加した：

https://jsfiddle.net/bdxa0sgz/1/

を私も次のことを試してみた：

if (isPresent == -1 || wishlist.length == 0){ 
... 
} 

かのようにするにはウィッシュリストは空ですが、それでも実行されます。しかし、これはnameのデータを混乱させ、配列を上書きするようです。私は非常に混乱しています。

https://jsfiddle.net/bdxa0sgz/5/

Answer 1

使用マップ（キー、値）ペアあなたがここ

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get

myMap.get(key) 

使用して確認することができるようにあなたの特性を格納するためには、この詳細な記事を見て： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

たとえば、

var myMap = new Map(); 
$('body').on('click', '.icon.heart button', function(e) { 
    var name = $(this).closest('.text-long').find('.intro-text h4').text(); 
    var permalink = $(this).closest('.text-long').find('.button-slot a').attr('href'); 
    var property = [name, permalink]; 
    console.log(property); 
    if (myMap.get(name) === null) { 
     var wishlist = JSON.parse(localStorage.getItem("wishlist")); 
     console.log('Wishlist from localStorage = ' + wishlist); 
     wishlist.push(property); 
     console.log(wishlist); 
     localStorage.setItem('wishlist', JSON.stringify(wishlist)); 
     myMap.set(name, permalink); 
    } 
}); 

また、このようなすべてのプロパティを取得するにはマップを反復処理することができます

var mapIter = myMap[Symbol.iterator](); 
console.log(mapIter.next().value); 

私はこれがあなたのために働く願っています。

Answer 2

propertyアレイをwishlistアレイにプッシュする前に、wishlistに正しいかどうかをチェックする必要があります。だから、あなたは単にこのようにするかもしれません。一般的なArray.prototype.compare()メソッドを考案しましょう。しかし、これは一般的なメソッドになるので、配列要素がオブジェクトである可能性も考慮します。だから我々はObject.prototype.compare()も持っています（この場合、私たちはそれを必要としませんが、知っておいていいです）。私は矢印の機能を使用しますが、あなたはサファリ9またはIE上のコードの動作を確認したい場合は、その従来の対応に置き換えること

Object.prototype.compare = function(o){ 
 
    var ok = Object.keys(this); 
 
    return typeof o === "object" && ok.length === Object.keys(o).length ? ok.every(k => this[k] === o[k]) : false; 
 
}; 
 
Array.prototype.compare = function(a){ 
 
    return this.every((e,i) => typeof a[i] === "object" ? a[i].compare(e) : a[i] === e); 
 
}; 
 
var button1 = ["29 Melton Road32 York Road","http://localhost:8888/test-properties/properties/29-melton-road/"], 
 
    button2 = ["32 York Road","http://localhost:8888/test-properties/properties/32-york-road/"], 
 
    wishlist = [], 
 
    push2wl = btn => wishlist.some(a => a.compare(btn)) ? wishlist : wishlist.concat([btn]); // if exists return wishlist untouched 
 
wishlist = push2wl(button1); 
 
wishlist = push2wl(button2); 
 
wishlist = push2wl(button1); // this won't get inserted 
 
wishlist = push2wl(button2); // this won't get inserted 
 

 
console.log(wishlist);

。