Question

我正在为我的个人网站开发我的投资组合，我的项目列在JSON文档中，如下所示（小样本）：

{
    "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"
    }
]
}

我的HTML布局：

<!DOCTYPE html>

<html data-ng-app="myApp">
    <head>
        <title>Portfolio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
        <script src="1.4.8.angular.min.js"></script>
        <script src="3.1.1.jquery.min.js"></script>
        <script src="script.js"></script>
        <script src="app.js"></script>
    </head>

<body>
    <header id="header">
        <nav>
            <div id="slider-menu">
                <i class="fa fa-times fa-2x" id="exit-i" aria-hidden="true"></i>
                <ul id="navigation-menu-header">
                    <li><a href="/">HOME</a></li>
                    <li><a href="resume.html">RÉSUMÉ</a></li>
                    <li><a href="gallery.html">GALLERY</a></li>
                    <li><a href="twitterfeed.html">TWITTER FEED</a></li>
                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                    <li><a href="publications.html">PUBLICATIONS</a></li>
                    <li><a href="tutoring.html">TUTORING</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </div>
            <i class="fa fa-bars fa-2x" id="list-i" aria-hidden="true"></i>
        </nav>
    </header>

    <section class="body-home" id="body-portfolio" ng-controller="portfolioCtrl">
        <h2>PORTFOLIO</h2>
        <p>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 <a href="http://www.github.com/amarvick">Github</a> 
           profile soon.</p>
        <section data-ng-repeat="project in projects">
            <h3>{{project.title}}</h3>
            <p>{{project.language}}</p>
            <p>{{project.description}}</p>
            <p id="github"><a href="{{project.link}}">Check it out on Github!</a></p>
        </section>
    </section>

    <hr>

    <footer id="footer">
        <p>GET IN TOUCH</p>
        <nav>
            <ul id="navigation-menu-footer">
                <li><a href="http://www.facebook.com/AlexMarvick" class="contact-link"><i class="fa fa-facebook fa-lg"></i></a></li>
                <li><a href="http://www.instagram.com/asmarvick" class="contact-link"><i class="fa fa-instagram fa-lg"></i></a></li>
                <li><a href="http://www.twitter.com/asmarvick" class="contact-link"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a href="https://www.linkedin.com/in/alex-marvick-3b657974" class="contact-link"><i class="fa fa-linkedin fa-lg"></i></a></li>
                <li><a href="https://github.com/amarvick" class="contact-link"><i class="fa fa-github fa-lg"></i></a></li>
                <li></li>
            </ul>
        </nav>
        <p style="font-size: 14px">Seattle, WA, United States</p>
    </footer>
</body>

我的app.js文件：

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!");

}

    );

}])

我过去曾处理过类似的问题，而且控制台给我的错误如下：

1.4.8.angular.min.js:107 SyntaxError: Unexpected token 
 in JSON at position 236
    at JSON.parse (<anonymous>)
    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)

我导入的缩小角度文件似乎有问题，但这似乎并不在我的掌控之中。我之前遇到过类似的问题，它会随机再次突然发生。寻找解决此问题的简单方法 - 我通常使用简单的Python HTTP Server来查看我的网站。

Answer 1

由于无效的换行符插入description本应为字符串的内容，您的JSON似乎无效。可以考虑逃避它。

Answer 2

观察：System.exit(1)无效。

工作演示：

＆＃13;

JSON

＆＃13;

var myApp = angular.module("myApp", []);

myApp.controller("portfolioCtrl", ['$scope', '$http', function($scope, $http) {

var responseData = {
	"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"
		}
	]
};

$scope.projects = responseData.projects;

}])

＆＃13;

AngularJS无法加载JSON？

2 个答案: