title: AngularJS Failing to Load JSON?
body: <p>I'm working on my portfolio for my personal website and I have my projects listed in a JSON document as shown below (Small sample):</p>
  
  <pre><code>{
      "projects":[
          {
              "title":"CONTACTS LIST",
              "language":"Ruby",
              "description":"A simple, generic contacts list which is created using a hash. Gives the user the option to look up a contact via phone, 
             name, add/delete contacts, view the list or quit.",
              "link":"https://github.com/amarvick/Contact-List-Ruby"
          },
  
      {
          "title":"RANDOM NUMBER GUESSING GAME",
          "language":"Ruby",
          "description":"You may see this game in C++ below, but I decided to replicate it in Ruby to make sure I understood several basic
             concepts using this syntax. You just have to guess the random number generated between 1 and 100 before the computer
             does, and you take turns back and forth.",
          "link":"https://github.com/amarvick/Random-Number-Guessing-Game-RUBY"
      },
  
      {
          "title":"BANKING GAME",
          "language":"Java",
          "description":"In this game, two different classes are used; one being the program itself 
              that imports the other class, where all of the functions are represented. The computer prompts you 
              that you have $10000, and it asks how much of it you'd like to store in your checking and savings 
              account with the remainder in your pockets. The computer will continually give you a menu asking what 
              you'd like to do with your money; either make a deposit, withdrawal, transfer between accounts, check 
              balances, or quit. There are some other options as well included that haven't been edited yet (you'll 
              notice a luck option and an option to check your items), and I'm not sure how I'm going to make those 
              parts but it's there for making the game more interesting. It's great extra practice, too.",
          "link":"https://github.com/amarvick/Banking-Game-Java"
      }
  ]
  }
  </code></pre>
  
  <p>My HTML Layout:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html data-ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;title&gt;Portfolio&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/&gt;
          &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"&gt;&lt;/script&gt;
          &lt;script src="1.4.8.angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="3.1.1.jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="script.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header id="header"&gt;
          &lt;nav&gt;
              &lt;div id="slider-menu"&gt;
                  &lt;i class="fa fa-times fa-2x" id="exit-i" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;ul id="navigation-menu-header"&gt;
                      &lt;li&gt;&lt;a href="/"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="resume.html"&gt;RÉSUMÉ&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gallery.html"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="twitterfeed.html"&gt;TWITTER FEED&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="portfolio.html"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="publications.html"&gt;PUBLICATIONS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="tutoring.html"&gt;TUTORING&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;i class="fa fa-bars fa-2x" id="list-i" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;section class="body-home" id="body-portfolio" ng-controller="portfolioCtrl"&gt;
          &lt;h2&gt;PORTFOLIO&lt;/h2&gt;
          &lt;p&gt;Here is a list of some projects that I have worked on in my own individual time. Each are organized by
             language, and code is available here! I'll get it on my &lt;a href="http://www.github.com/amarvick"&gt;Github&lt;/a&gt; 
             profile soon.&lt;/p&gt;
          &lt;section data-ng-repeat="project in projects"&gt;
              &lt;h3&gt;{{project.title}}&lt;/h3&gt;
              &lt;p&gt;{{project.language}}&lt;/p&gt;
              &lt;p&gt;{{project.description}}&lt;/p&gt;
              &lt;p id="github"&gt;&lt;a href="{{project.link}}"&gt;Check it out on Github!&lt;/a&gt;&lt;/p&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  
      &lt;hr&gt;
  
      &lt;footer id="footer"&gt;
          &lt;p&gt;GET IN TOUCH&lt;/p&gt;
          &lt;nav&gt;
              &lt;ul id="navigation-menu-footer"&gt;
                  &lt;li&gt;&lt;a href="http://www.facebook.com/AlexMarvick" class="contact-link"&gt;&lt;i class="fa fa-facebook fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.instagram.com/asmarvick" class="contact-link"&gt;&lt;i class="fa fa-instagram fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.twitter.com/asmarvick" class="contact-link"&gt;&lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://www.linkedin.com/in/alex-marvick-3b657974" class="contact-link"&gt;&lt;i class="fa fa-linkedin fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://github.com/amarvick" class="contact-link"&gt;&lt;i class="fa fa-github fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;p style="font-size: 14px"&gt;Seattle, WA, United States&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my app.js file:</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.controller("portfolioCtrl", ['$scope', '$http', function($scope, $http) {
  
  var url = "data.json";
  
  $http.get(url).then(function(response) {
      $scope.projects = response.data.projects;
  }, function(error) {
      alert("JSON data failed to load!");
  
  }
  
      );
  
  }])
  </code></pre>
  
  <p>I've dealt with issues like this in the past, and the console gives me an error that looks as follows: </p>
  
  <pre><code>1.4.8.angular.min.js:107 SyntaxError: Unexpected token 
   in JSON at position 236
      at JSON.parse (&lt;anonymous&gt;)
      at uc (1.4.8.angular.min.js:15)
      at $b (1.4.8.angular.min.js:82)
      at 1.4.8.angular.min.js:83
      at n (1.4.8.angular.min.js:7)
      at cd (1.4.8.angular.min.js:83)
      at c (1.4.8.angular.min.js:84)
      at 1.4.8.angular.min.js:119
      at r.$eval (1.4.8.angular.min.js:133)
      at r.$digest (1.4.8.angular.min.js:130)
  </code></pre>
  
  <p>It appears that there's something wrong with the minified angular file that I'm importing, but that doesn't seem to be in my control. I've had similar issues before and it'll all the sudden work again randomly. Looking for any simple way to resolve this -- I normally use a simple Python HTTP Server to view my site.</p>