无法在AngularJS中显示会话存储中的JSON对象

时间:2017-10-07 16:59:23

标签: javascript html angularjs json angularjs-scope

我在显示名为" currentSet"的JSON对象时遇到问题。来自会话存储。当我改为使用文件夹中的JSON文件时,一切正常,这意味着HTML代码可能很好。我已经将问题缩小到$ scope.set或loadQuiz-function,并尝试了几项,但无法使其工作。这是控制器的相关部分:

    $scope.set = angular.fromJson(sessionStorage.getItem('currentSet')); //doesn't work
    //$scope.set = 'data/konflikter.js'; //works

    $scope.defaultConfig = {
        'autoMove': true,
        'pageSize': 1,
        'showPager': false
    }

    $scope.onSelect = function (question, choice) {
          question.choices.forEach(function (element, index, array) {
            question.Answered = choice;
          });

        if ($scope.defaultConfig.autoMove == true && $scope.currentPage < $scope.totalItems) {
            $scope.currentPage++;
        }
        else {
            $scope.onSubmit();
        }
    }

    $scope.onSubmit = function () {
        var answers = [];
        $scope.questions.forEach(function (question, index) {
            answers.push({'questionid': question._id, 'answer': question.Answered});
        });
        $http.post('https://fhsclassroom.mybluemix.net/api/quiz/submit', answers).success(function (data, status) {
            $location.path('/');
        });
    }

    $scope.pageCount = function () {
        return Math.ceil($scope.questions.length / $scope.itemsPerPage);
    };

    $scope.loadQuiz = function (data) {
        $http.get(data)
         .then(function (res) {
             $scope.name = res.data.name;
             $scope.questions = res.data.questions;
             $scope.totalItems = $scope.questions.length;
             $scope.itemsPerPage = $scope.defaultConfig.pageSize;
             $scope.currentPage = 1;

             $scope.$watch('currentPage + itemsPerPage', function () {
                 var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                   end = begin + $scope.itemsPerPage;

                 $scope.filteredQuestions = $scope.questions.slice(begin, end);
             });
         });
    }
    $scope.loadQuiz($scope.set);

2 个答案:

答案 0 :(得分:0)

好的我弄清楚了什么是错的,你正在加载文件,所以你需要获取文件 - 或者导入它以获取与你的工作原理相关的内容:

$scope.set = 'data/konflikter.js'; //works but combined with http request

如果您希望从dataStorage传递数据,则需要更改loadQuiz,不要像这样更改http请求:

$scope.loadQuiz = function (res) {
    $scope.name = res.data.name;
    $scope.questions = res.data.questions;
    $scope.totalItems = $scope.questions.length;
    $scope.itemsPerPage = $scope.defaultConfig.pageSize;
    $scope.currentPage = 1;

    $scope.$watch('currentPage + itemsPerPage', function () {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
            end = begin + $scope.itemsPerPage;

        $scope.filteredQuestions = $scope.questions.slice(begin, end);
    });
}

答案 1 :(得分:0)

在@pegla的帮助下,我能够像这样解决问题:

$scope.loadQuiz = function () { 

        $scope.set = angular.fromJson(sessionStorage.getItem('currentSet'));

        $scope.questionsetid = $scope.set.questions[0].questionsetid;
        $scope.name = $scope.set.name;
        $scope.questions = $scope.set.questions;
        $scope.totalItems = $scope.set.questions.length;
        $scope.itemsPerPage = $scope.defaultConfig.pageSize;
        $scope.currentPage = 1;

        $scope.$watch('currentPage + itemsPerPage', function () {
             var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
               end = begin + $scope.itemsPerPage;

             $scope.filteredQuestions = $scope.questions.slice(begin, end);
        });
    }

    $scope.loadQuiz();