Search multi-dimensional array before pushing to array, no duplicate data
<p>I'm trying to build 'wishlist' functionality. When you click a button, it saves the name and link for the particular 'property' in an array in local storage. I will then output this on the page for the user.</p>

<p>So far it works, my only problem is that it will always insert the property name and link, even if it's already present in the array. I need to create a check, to see if it's already there, and only push it if it can't be found.</p>

<p>Here's a JSFiddle that works. Click the "save" buttons and check localStorage and you will see that the data is added. But click the same button again and you'll see it's added, again.</p>

<p><a href="https://jsfiddle.net/g9kkx3fh/3/" rel="nofollow">https://jsfiddle.net/g9kkx3fh/3/</a></p>

<p>Here's the basic code. It grabs the property name and link from the closest clicked button, it pulls data back from the array in localStorage, then uses <code>.push</code> to add the new data, then re-stringifys it and adds it back to localStorage.</p>

<pre><code>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
</code></pre>

<p>I knew I needed to iterate over the array, being multi-dimensional, and look for the same <code>name</code> var. So I started with this:</p>

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

<p>Here's the problem with this. If the localStorage var <code>wishlist</code> is empty, then its <code>length</code> is 0. Therefore the <code>for</code> loop never works, because <code>i &lt; wishlist.length</code> is never true, because <code>wishlist</code> is always 0.</p>

<p>So how do I fix this? I'm never able to add anything to the array, because I can never get the value of <code>isPresent</code>, because my <code>for</code> loop never works.</p>

<p>Here's a JSFiddle for the broken code, but with the for loop and if statement added:</p>

<p><a href="https://jsfiddle.net/bdxa0sgz/1/" rel="nofollow">https://jsfiddle.net/bdxa0sgz/1/</a></p>

<p>I've also tried the following:</p>

<pre><code>if (isPresent == -1 || wishlist.length == 0){
...
}
</code></pre>

<p>So that if the wishlist is empty, it'll still run. However this seems to jumble together the <code>name</code> data and overwrite the array. I'm very confused.</p>

<p><a href="https://jsfiddle.net/bdxa0sgz/5/" rel="nofollow">https://jsfiddle.net/bdxa0sgz/5/</a></p>