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

Question

I am fetching data from a JSON file and saving it in an object array. Then I want to share the array between two controllers one controller is showing the data in the page while other can add objects to the array using a modal. But the problem is I am unable to render the data into the page. The object array is empty.

Here is the service.

.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 to render the data

.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 for the modal

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

The problem is in the service because initially when I was getting the array like this

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

Data was populating but when-when I was updating it was throwing error this.faqlist.push is not a function then someone on the StackOverflow told me told me that the above line changing the array to promise so I made the changes but it is not populating the data now.

Check first solution http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers?rq=1 — Alpesh Prajapati, May 02 '16 at 07:11
@AlpeshPrajapati I am quite new to angularJs so can you please help me how to retrieve the data. I got the idea that i have to return an array object from the factory which will be shared by both the controllers Here what I am trying to do. `.factory('Faq', function ($http) { var dat=[]; $http.get('/Json/faq.json').then(msg) { dat = msg.data; } return dat; })` — Shahzad Ahamad, May 02 '16 at 08:31

Nephidream · Accepted Answer · 2016-05-02T09:14:13.357

1

You should change how you populate your array:

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

Doing the this.faqlist = result.data change the reference to the array, and so you lose it in your controller

edited May 02 '16 at 09:14

answered May 02 '16 at 08:36

Nephidream

78
7

It didn't work still getting the same issue. It is not populating the data. while debugging it says self.addfaq is not a function – Shahzad Ahamad May 02 '16 at 08:46
I moved the var self = this, try it this way ? – Nephidream May 02 '16 at 09:14
It worked thanx a lot. can you please explain how the moving `var self = this;` to top helped – Shahzad Ahamad May 02 '16 at 09:19
1

Because inside the then() callback, the scope change and the 'this' is no longer your service but the 'this' of the callback function, which is 'null' or 'undefined' if you 'use strict' in this context – Nephidream May 02 '16 at 09:53

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

Controller to render the data

Controller for the modal

1 Answers1