Need help with array of objects

[AnnabelleSP]

Hi, I need help with the code below. I want to check if the bookmark value exists in the array. Please scan through the code and find the bold one. It didn’t give me the right output. Thank you.

//save bookmark
function saveBookmark(e){
//Get form values
var siteName = document.getElementById('siteName').value;
var siteUrl = document.getElementById('siteUrl').value;

if(!validateForm(siteName, siteUrl)){
return false;
}

var bookmark = {
name: siteName,
url: siteUrl
}

//test if bookmarks is null
if(localStorage.getItem('bookmarks') === null){
//initialize an array
var bookmarks = [];

//add bookmark into the array
bookmarks.push(bookmark);

//set to localStorage
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
} else{
//get bookmarks from localStorage
var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));

//add bookmark into array
bookmarks.push(bookmark);

𝐯𝐚𝐫 𝐟𝐨𝐮𝐧𝐝 = 𝐛𝐨𝐨𝐤𝐦𝐚𝐫𝐤𝐬.𝐬𝐨𝐦𝐞(𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧(𝐞𝐥){
𝐫𝐞𝐭𝐮𝐫𝐧 𝐞𝐥.𝐧𝐚𝐦𝐞 === 𝐛𝐨𝐨𝐤𝐦𝐚𝐫𝐤𝐬.𝐬𝐢𝐭𝐞𝐍𝐚𝐦𝐞;
});

𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠(𝐟𝐨𝐮𝐧𝐝);

//re-set back to localStorage
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));

//clear form
document.getElementById('myForm').reset();

//re-fetch bookmarks
fetchBookmarks();
}

//Prevent form from submitting
e.preventDefault();
}

[lynxlynxlynx]

first, learn to indent your code!

Maybe the name is a different type, but either way, I’d just run this in the console step by step to see why it isn’t found.

[joops75]

The problem is with this line:

return el.name === bookmarks.siteName;

bookmarks is an array, not an object, so it won’t have the key siteName. Also the bookmark object you previously create doesn’t have the siteName key either. You need to use a valid object with a valid key for your code to work.

[AnnabelleSP]

So what should I do? I have kept debugging it for 1-2 hours.

Here’s the complete code for this.

Bookmarker

Need much help. Thanks.

[joops75]

The problem is on this line:

if(localStorage.getItem('bookmarks') === null)

If 'bookmarks' is not present, localStorage.getItem('bookmarks') will return undefined, not null.

[codename11]

$(document).ready(function(){
   
    $("button").click(function(){
        
      var str1=JSON.parse(localStorage.bookmarks);
      var namex = document.getElementById("siteName").value;
      var urlx = document.getElementById("siteUrl").value;

      for(var i=0;i<str1.length;i++){

         if(namex===str1[i].name){
              alert("Show me duplicates name indexes: "+i);//Value for name entered already exists
        }

        if(urlx===str1[i].url){
            alert("Show me duplicates url indexes: "+i);//Value for url entered already exists
       }

   }
    
  });
  
});

When you click your button ( ͡° ͜ʖ ͡°) …

1. You parse json string into json itself.
2. get values of fields for name and url.
3. Then iterate though array of objects whom previously are parse into json from string.
4. Conditions are self explanatory.

[AnnabelleSP]

Thank you guys, I have finally solved it!!!

[joops75]

How did you solve it?

[AnnabelleSP]

I realized I missed out the variable declared, which is

var siteName = document.getElementById('siteName').value;

Thanks to @codename11

You can check out the code here https://codepen.io/SparklePink/pen/LJGzMO and test it.

Thanks to this wonderful site: https://stackoverflow.com/a/22844712/10120050

And also thank you @joops75 for helping out. I appreciate it.

[AnnabelleSP]

Any related comments are welcomed

[codename11]

You should disable adding duplicates. Before adding, check if is there already bookmark under same name, url or both in localStorage. If there is, let message pop out “You already have that bookmarked!” or somethin’ …