如何将数据从json文件提取到对象数组中并在两个控制器之间共享

Question

我从JSON文件中获取数据并将其保存在对象数组中。然后我想在两个控制器之间共享数组，一个控制器显示页面中的数据，而另一个控制器可以使用模态向数组添加对象。但问题是我无法将数据呈现到页面中。对象数组为空。

这是服务。

.service('Faq', function ($http) {
    this.faqList = [];

    $http.get('/Json/faq.json').then(function (result) {
       // process your results here
       this.faqList = result.data;
    });        
    this.getFaqs = function (){
       return this.faqList;
    }

    this.addfaq = function (obj) {
        this.faqList.push(obj);
    };
})

用于呈现数据的控制器

.controller('AppCtrl', function ($scope, $modal, Faq) { 
    $scope.filteredFaqData = [];
    $scope.currentPage = 1;
    $scope.numPerPage = 5;
    $scope.maxSize = 5;
    $scope.faqData = [];

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

        $scope.filteredFaqData = $scope.faqData.slice(begin, end);
    });

    $scope.show = function () {
        $modal.open({
            templateUrl: "faqAddUpdate.html",
            controller: "faqctrl"
        });
    };

    $scope.deleteFaq = function (id) {
        var l = $scope.faqData.length;
        for (var i = 0; i < l; i++) {
            if ($scope.faqData[i].id == id) {
                $scope.faqData.splice(i, 1);
                break;
            }
        }
        console.log(id);
    };

})

模态控制器

.controller('faqctrl', function ($scope, $modalInstance, Faq) {
    $scope.question = '';
    $scope.id = '';
    $scope.answer = '';

    $scope.editFaq = function (id) {
        $scope.divFaq = true;
        $scope.faqs = [];
        Faq.getData().then(function (msg) {
            $scope.faqs = msg.data;
            var l = $scope.faqs.length;
            for (var i = 0; i < l; i++) {
                if ($scope.faqs[i].id == id) {
                    $scope.question = $scope.faqs[i].question;
                    $scope.id = $scope.faqs[i].id;
                    $scope.answer = $scope.faqs[i].answer;
                    $scope.Action = "Update";
                }
            }
        });
    };
    $scope.AddUpdateFAQ = function () {
        var faq = {
            id: $scope.id,
            question: $scope.question,
            answer: $scope.answer
        };
        Faq.addfaq(faq);

        console.log(faq);

        $modalInstance.close();
    };

    $scope.Cancel = function () {
        $modalInstance.dismiss();
    };
});

问题在于服务，因为最初当我得到像这样的数组时

this.faqList =  $http.get('/Json/faq.json');

数据正在填充，但是当我更新它时抛出错误 this.faqlist.push 不是函数然后StackOverflow上的某个人告诉我告诉我上面的行将数组更改为保证所以我做了更改，但现在没有填充数据。

Answer 1

您应该更改填充阵列的方式：

.service('Faq', function ($http) {
  var self = this;
  this.faqList = [];

  $http.get('/Json/faq.json').then(function (result) {
    // process your results here
    // this.faqList = result.data;
    result.data.forEach(function(item){
      self.addfaq(item)
    })
  });

  this.getFaqs = function() {
    return this.faqList;
  }

  this.addfaq = function(obj) {
    this.faqList.push(obj);
  };
})

执行this.faqlist = result.data更改对数组的引用，这样就会在控制器中丢失它