Build a Bookmark Manager App - Build a Bookmark Manager App

[yaroha.egor]

Tell us what’s happening:

Can’t pass 5th test. 5. When the bookmarks key in the localStorage does not contain a valid array of bookmark objects, the getBookmarks function should return an empty array.

Your code so far

/* file: script.js */
function getBookmarks() {
  const bookmarksData = localStorage.getItem('bookmarks');
  if (!bookmarksData) {
    return [];
  }
  try {
    return JSON.parse(bookmarksData);
  } catch (error) {
    return [];
  }
}

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Challenge Information:

Build a Bookmark Manager App - Build a Bookmark Manager App

freeCodeCamp.org

let bookmarks = getBookmarks();
function getBookmarks() {
    return JSON.parse(localStorage.getItem('bookmarks')) || [];
}

This is my another version

[ILM]

use console.log to print what you get from getItem, and open the browser console when you run the tests to see what value is printed last before the test fails

[yaroha.egor]

let bookmarks = getBookmarks();
function getBookmarks() {
    return JSON.parse(localStorage.getItem('bookmarks')) || [];
}

function saveBookmark() {
    const bookmarkObject = {
        name: document.getElementById('name').value,
        category: document.getElementById('category-dropdown').value,
        url: document.getElementById('url').value,
    }
    bookmarks.push(bookmarkObject);
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
console.log("Bookmarks module loaded. Current bookmarks:", getBookmarks());

empty localStorage outputs the empty array.
when i save something i get new correct array… or can’t I get what do you mean

[pkdvalis]

Did you run the test suite in this screenshot?

You should put the console log inside getBookmarks() so it runs every time that function runs. Where it is now, it only runs once.

I would put it right before the return in getBookmarks() and log the exact same line that is returned.

Then run the tests and watch the output.

[yaroha.egor]

Same mistake on tests execution
Regarding console log, I’ve added it, but I can’t get how it helps me, I see log every time there is an operation with localStorage, as it’s expected.
Next, when localStorage is empty, i get [] as required.

This lab is exhausting And this is only the beginning of problems…

let bookmarks = getBookmarks();
function getBookmarks() {
    console.log("Retrieving bookmarks from local storage...");
    const storedBookmarks = localStorage.getItem('bookmarks');
    console.log("Stored bookmarks retrieved:", storedBookmarks);
    if (storedBookmarks) {
        return JSON.parse(storedBookmarks);
    } else {
        return [];
    }
}
console.log(getBookmarks());
localStorage.clear()

[ILM]

now run the tests with the console open, so you see what is being retrieved by localStorage during the tests

[pkdvalis]

Click the “Run the Tests” button with the console open so you can see what happens.

[yaroha.egor]

That’s what I get and it doen’t say anything to me in relation to my mistake

[ILM]

look at the Stored bookmarks log before the error

what does it say the value from the local storage is? and does your app deal with it without crashing?

[yaroha.egor]

Yes, it seems like it cannot handle situations when retrieving from localStorage gives an invalid value, but when I use try catch block it persists

function getBookmarks() {
    const storedBookmarks = localStorage.getItem('bookmarks');
    if (!storedBookmarks) {
        return [];
    }
    try {
        return JSON.parse(storedBookmarks);
    } catch (error) {
        console.error("Failed to parse bookmarks from localStorage:", error);
        return [];
    }
}

Isn’t this code correct for handling such cases?

[pkdvalis]

Your code and this output don’t seem to match?

What’s that small n? Can you expand it?

[ILM]

now the red block is your console.error
is the test failing?

can you expand that 2<message collected>, it may say something useful, after the one with invalid you should see a new one

[yaroha.egor]

that’s the ns. with code in message above I still get 5th test failure

[ILM]

you need to keep printing the value you get from the local storage, the test is testing an other invalid value, and it expects an empty array for that one too