Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Local Storage Project

Unexpected Type error recentSearches.forEach is not a function.

I got the error forEach not a function. Looks like my code is verbatim to what is in the video. I'm sure I'm missing something ...

var recentSearches = getRecentSearches();
recentSearches.forEach(function(searchString) {
  appendListItem(recentSearchList, searchString);
});
Qasim Hafeez
Qasim Hafeez
12,731 Points

Are you using workspaces or your own text editor? I'm using my own text editor and got the same error. I copied my code into workspaces and it worked perfectly. The instructions say that if you're going to use your own text editor to install something on the command line. I tried to install it but, was not able to.

Thanks Qasim, I was using workspaces.

7 Answers

Victor Learned
Victor Learned
6,976 Points

I just hit this same issue and I think it's a result of bad data in your localStorage when using the Treehouse workspace. I'm pretty sure this is a result of the bug shown in the video of passing the incorrect data to JSON.stringify at the 10:17 mark. If manually clear localStorage in the dev tools it immediately fixed this error.

Adam Frank
Adam Frank
2,981 Points

Hey I ran into this problem as well. Even though my code was correct, 'recentSearches' was still returning a string, not an array.

I thought maybe this was because 'recentSearches' was unable to change type.

I manually changed the recentSearches value to an empty array.

What I did was in the js console typed

localStorage.setItem('recentSearches', []);

then

local.Storage.recentSearches

to verify that it was indeed now an array.

Then 'getRecentSearches' worked just fine. Hope this helps.

Kevin Snider
seal-mask
.a{fill-rule:evenodd;}techdegree
Kevin Snider
Front End Web Development Techdegree Student 25,275 Points

I was using Sublime for this project and had the same error.

I did what Victor Learned suggested and cleared the local storage in the chrome dev tools with:

localStorage.clear();

That fixed the problem.

Joel Kraft
STAFF
Joel Kraft
Treehouse Guest Teacher

Hi Patrick! As Steven mentioned, .forEach() is a method that exists on arrays, so if getRecentSearches() does not return an array, you will see that error. I'm not sure how far along you are yet, but if your workspace is in the starting state for this workshop, getRecentSearches() will be empty, so the error will be present. By following along with the video, you should see the error disappear once getRecentSearches() is implemented (around the 5:36 mark).

If this doesn't solve your issue, it might be helpful to see what you have for getRecentSearches().

Steven Parker
Steven Parker
218,679 Points

The .forEach method is an extension for arrays. If getRecentSearches returned something other than an array, that might cause this error. You didn't include that part of the code, but I would certainly look there.

Next time, remember you can share everything by making a snapshot of your workspace and posting the link to it.

I also downloaded the files because workspaces was not loading (kept getting 403 errors in the console). When I attemtped to run the finished project, I got the recentSearches.forEach is not a function.

Maybe this issue is related to Node.js? It looks like Node.js is used to build the files. Maybe the project files have to be run through Node?

Joel Kraft
Joel Kraft
Treehouse Guest Teacher

Node is just used to create a simple server that serves the files to your browser. It should also work to just drag index.html into chrome or firefox (in this case your filesystem would be serving the files) though keep in mind this isn't a development best-practice.

I just downloaded and ran the finished project, and I'm not getting the error.

What browser and version are you using?

Today I tried to run the project through Bracket's live preview, and it worked. Yesterday I tried to just open the file from file explorer.

Perhaps this had something to do with the issue?