Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Improving Our Todo App Finalizing Our Application

Gavin Murphy
Gavin Murphy
10,004 Points
Posted by Gavin Murphy
Gavin Murphy
10,004 Points

I am not able to load my json file

The console logs this message

XMLHttpRequest cannot load file:///C:/wamp/www/angular-tut/mock/todos.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

The object 'todos' works when I have it in the main app.js file but as soon as I make a call for it with the service it breaks. I would be grateful for any help

5 Answers

Caesar Bell
Caesar Bell
24,829 Points
Caesar Bell
Caesar Bell
24,829 Points

Simple mistake a lot of us make specially in the beginning. What happens is you are trying to make a server request to get your JSON file, but you dont have a server running.

file:///C:/wamp/www/angular-tut/mock/todos.json.

Thats just your static file, you would need to use localhost:8000 to be able to correctly run a angular get request to retrieve the json file. That is why when you have the object in the main.js it works its because its is not making a get request so doesn't need a server running. Use MAMP or php local server to get your localhost going, tree house has a great lesson on installing and using localhost.

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

What Caesar Bell said except there's no need for MAMP. Why run a php server when you can run a nodeJS server with equal or less effort? Here's what you do:

  1. Install NodeJS // Hint: If you're on a Mac, you want to install and use Homebrew for this
  2. Open your favorite terminal emulator
  3. Install http-server by running: npm install http-server -g
  4. Start http-server by running: http-server 'path/to/your/angular/root/directory' -o
  5. That last command — specifically, the -o flag — should open a browser window at: localhost:8080

Your angular app should work now; just type in localhost:8080 in your browser's address bar. Remember that from now on — assuming you've completed steps 1-3 above — anytime you desire a server instance, all you have to do is step 4.

Gavin Murphy
Gavin Murphy
10,004 Points
Gavin Murphy
Gavin Murphy
10,004 Points

Thanks Mikis , Ceaser and Akak. I thought I was going crazy but I guess it makes sense now. Special thanks to Mikis for the extra knowledge about Node

akak
akak
29,446 Points
akak
akak
29,446 Points

Try using different browser. Chrome is known for blocking local ajax requests.