使用 Angular.JS 将 JSON 导入 HTML（错误）！答案

【问题标题】：Importing JSON to HTML with Angular.JS (error)!使用 Angular.JS 将 JSON 导入 HTML（错误）！
【发布时间】：2018-01-29 22:56:23
【问题描述】：

我在使用 Angular.JS 将我的 JSON 数据传输到 HTML 时遇到问题，我正在学习编程课程，这是我遇到的一个作者似乎没有遇到的问题，有人可以帮忙吗？

我正确链接了角度，我正确添加了应用程序，它应该可以工作，有什么想法吗？

https://pastebin.com/K4HR23Tk - HTML

<html ng-app="myQuiz">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Your Knowledge: Saturn</title>
    <link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz" ng-controller="QuizController">
<h1>Test Your Knowledge: <span>Saturn</span></h1>
<div class="progress"> {{totalQuestions}} </div>

https://pastebin.com/5emA4016-JS

(function(){
    var app = angular.module('myQuiz',[]); 
    app.controller('QuizController',['$scope', '$http', '$sce', function($scope,$http,$sce){ 
        $scope.score = 0;
        $scope.activeQuestion = -1;
        $scope.activeQuestionAnswered = 0;
        $scope.percentage = 0;
        $http.get('quiz_data.json').then(function(quizData){
            $scope.myQuestions = quizData.data;
            $scope.totalQuestions = $scope.myQuestions.length;
        });
    });
})();

【问题讨论】：

使用 jsfiddle 或 codepen 来分享你的代码。他们可以通过选择它作为选项来链接 Angular JS。
好的，我现在试着把我的代码放进去，这样我就可以得到一些帮助，谢谢。

标签： javascript html angularjs json

【解决方案1】：

您的代码缺少右方括号 ]。这是完整的代码：

(function(){
    var app = angular.module('myQuiz',[]); 
    app.controller('QuizController',['$scope', '$http', '$sce', function($scope,$http,$sce){ 
        $scope.score = 0;
        $scope.activeQuestion = -1;
        $scope.activeQuestionAnswered = 0;
        $scope.percentage = 0;
        $http.get('quiz_data.json').then(function(quizData){
            $scope.myQuestions = quizData.data;
            $scope.totalQuestions = $scope.myQuestions.length;
        }).catch(function(response){
            console.error(response && response.message || response);
            console.log("Using 2 dummy questions");
            $scope.myQuestions = ["dummy", "questions"];
            $scope.totalQuestions = $scope.myQuestions.length;
        });
    // below inserted the missing `]`.
    }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<body ng-controller="QuizController">
  <div>Total questions: {{totalQuestions}}</div>
  <div ng-repeat="question in myQuestions">{{question}}</div>

您在'QuizController' 之后的开头[ 从未被匹配的] 关闭。

如果您使用可以帮助突出显示或自动关闭每个块的体面的编辑器或 linter，则可以避免此错误。

去过那里的人给您的额外建议（我假设您是初学者，因为您在评论中提到了“粘贴”并且您确实声称您正在学习编程课程）-如果你正在为这个简单的错字而苦苦挣扎，这意味着你走得太快了，没有停下来消化。慢慢来，仔细阅读所有内容并尝试理解它。不要陷入复制和粘贴代码的陷阱。你可能需要更多的时间来学习和编写好的代码。

编码愉快！

【讨论】：

谢谢！这似乎有效，因为它删除了 {{totalQuestions}} 但尚未将“5”显示为总问题。我会玩弄它，谢谢你的建议。是的，我是 Angular JS 的新手，但我已经做了一段时间的 HTML 和 Swift！非常感谢您的帮助：D 我想我现在知道该怎么做了
尝试在 $http.get 块之前初始化 $scope.totalQuestions = 0。如果您的 HTML 显示 0，则可能是因为它未正确绑定以在承诺解决后更新值。
您可以通过对两个答案都进行投票来表达您的爱意，并将其中一个标记为正确的答案。
哦不，这是否意味着@user9286154 没有爱的能力？ :o(

【解决方案2】：

添加右方括号}]);

你在这里打开了数组 ['$scope

【讨论】：

我会试试这个！我应该在哪里准确粘贴这个？感谢您的帮助：D
倒数第二行
缺少的] 应该用于关闭app.controller 块。尝试使用带有自动完成或块突出显示的 IDE。它应该可以帮助您关闭括号。
这对我的问题没有帮助，它仍然显示 {{totalQuestions}} 并且没有导入我的数据。不过谢谢：D
@PieOhPah 我会尝试添加 ] 看看会发生什么。谢谢。

【解决方案3】：

这不是直接的答案，但包含有关如何避免 OP 遇到的错误的提示。

始终从绝对最少的代码开始，然后构建它，始终确保代码在您增加复杂性时继续工作。每当它中断时，显然是您刚刚添加/更改的内容。

在以下代码示例中，我删除了对IIFE 的需求，并添加了"use strict" 以激活我一直推荐的Strict Mode。点击Run code snippet 按钮查看实际代码：

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController', function(){
  "use strict";
  console.log("QuizController");
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

使用数组语法注入依赖项（我认为将依赖项格式化在单独的行上是个好主意）：

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController', [
    '$scope', '$http',
    function($scope, $http){ 
        "use strict";
        console.log("Injected $scope successfully?:", Boolean($scope));
        console.log("Injected $http successfully?:", Boolean($http));
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

然后尝试访问外部数据。此示例引发错误。我让你运行代码看看为什么：

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController',[
    '$scope', '$http',
    function($scope, $http){ 
        "use strict";
        $http.get('quiz_data.json').then(function(quizData){
            console.log(quizData.data);
        }).catch(function(response){
            console.error("Unable to load quiz data");
            console.error(response && response.message || response);
        });
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

【讨论】：

@user9286154 以上所有示例都无需 JSFiddle 或 codepen 即可工作