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

How to fetch data from a json file into an object array and sharing it between two controllers

本文关键字：之间 控制器 两个 共享 数组 文件 json 数据 对象 提取      更新时间：2023-09-26

我从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上的某个人告诉我，上面的行将数组更改为promise，所以我进行了更改，但它现在没有填充数据。

您应该更改填充数组的方式：

.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);
  };
})

这样做.faqlist=result.data会更改对数组的引用，因此您会在控制器中丢失它

相关文章：