How should I get the data from JSON into another angular js controller?

Question

I'm new to AngularJS and stuck on below code.

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: "partials/home.html",
        controller: "mainController",
    })
    .when('/products', {
        templateUrl: "partials/productlist.html",
        //controller: "ProductController",
    })
    .when('/product/:prodID', {
        templateUrl: "partials/product.html",
        controller: "viewController",
    })
    .when('/contact', {
        templateUrl: "partials/contact.html",
        controller: "contactController",
    })
    .otherwise({
        redirectTo: "/"
    });
});

app.controller('ProductController', function($scope, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
    });
 }).
controller('viewController',function($scope,$routeParams){
    $scope.eachproduct = $scope.datap[$routeParams.prodID];
});

And my product.html page code will look like this.

<div ng-controller="viewController">
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li class="active">{{eachproduct.link}}</li>
    </ol>
    <div class="col-md-4">
        <figure><img ng-src="{{ }}"></figure>
        <p>
            <a href="">Read More</a>
        </p>
    </div>
</div>

Problem is when I navigate to any product page value of {{eachproduct.link}} is not showing.

Any solution will be appriciated.

you commented out the ProductController within .when('/products' ? — Hieu Le
– Hieu Le, Commented Sep 25, 2015 at 4:43
If I remove comment then the ProductController is not working :( — VAN KD
– VAN KD, Commented Sep 25, 2015 at 4:46
@HieuLe I removed the commented part now productlist.html page is working fine but problem is still there with product.html page. Should I add $rootScope? — VAN KD
– VAN KD, Commented Sep 25, 2015 at 4:52
this is because when you go to a product page, it does NOT run the productcontroller code. It will only run the viewController — Hieu Le
– Hieu Le, Commented Sep 25, 2015 at 4:53

SANN3 · Accepted Answer · 2015-09-25 06:30:15Z

3

Use $rootScope instead of $scope

$rootScope

The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

Sample :

    controller('viewController',['$scope','$routeParams', '$http','$rootScope',function($scope,$routeParams, $http,$rootScope){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
       $rootScope.eachproduct = $scope.datap[$routeParams.prodID];
     });
   }]);

edited Sep 25, 2015 at 6:30

answered Sep 25, 2015 at 5:06

SANN3

10.2k7 gold badges68 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

VAN KD Over a year ago

But where should I pass the $rootScope in above example? Is it something like below?

VAN KD Over a year ago

app.controller('ProductController', function($scope, $http, $rootScope){ $http.get('partials/productTable.json').success(function(response){ $scope.datap = response.lists; }); }). controller('viewController',function($scope,$routeParams){ $rootScope.eachproduct = $scope.datap[$routeParams.prodID]; });

SANN3 Over a year ago

@VANKD Yes like that only.

Pankaj Parkar Over a year ago

Creating service would be better

VAN KD Over a year ago

@PankajParkar is it possible for you to provide any example with my code?

|

Hieu Le · Accepted Answer · 2015-09-25 05:02:22Z

0

app.controller('ProductController', function($scope, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
    });
 }).
controller('viewController',function($scope,$routeParams, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
        $scope.eachproduct = $scope.datap[$routeParams.prodID];
    });
});

edited Sep 25, 2015 at 5:02

answered Sep 25, 2015 at 4:54

Hieu Le

7284 silver badges8 bronze badges

1 Comment

VAN KD Over a year ago

"ReferenceError: $http is not defined" and product.html still showing me {{eachproduct.link}}

benfes · Accepted Answer · 2015-09-25 05:08:51Z

0

It seems like what you are looking for is an angular provider such as a factory to store the values in, this will allow the values to be pass values around the controllers while using the routes.

Have a look at this example, while it isn't using routes, the principal is the same: https://jsbin.com/wiwejapiku/edit?html,js,output

For more information on providers have a look here: https://docs.angularjs.org/guide/providers

Your example would work something like this:

app
.factory('productFactory',function(){
    return {
        data: {}
    };
})
.controller('ProductController', function($scope, $http, productFactory){
    $scope.productFactory = productFactory;
    $http.get('partials/productTable.json').success(function(response){
         $scope.productFactory.data = response.lists;
    });
}).
controller('viewController',function($scope,$routeParams, productFactory){
    $scope.productFactory = productFactory;
    $scope.eachproduct = $scope.productFactory.data[$routeParams.prodID];
});

Note you would also have to change your view to reference 'productFactory.data' respectively.

edited Sep 25, 2015 at 5:08

answered Sep 25, 2015 at 4:59

benfes

2151 silver badge6 bronze badges

5 Comments

Hieu Le Over a year ago

kind of new to this myself. Will every call to productFactory keep calling the code to get the data? or will it only do it once? For example, if there is an ajax call to get the data, then will that get called every time it is injected to the controller?

benfes Over a year ago

No, the call will only happen once, the purpose of providers in angular is to allow you to have a persistant state throughout the application. So any changes you make to the factory would mean that they will be accessible from anywhere else that they are consumed. The data will only get changed if you change it (either manually or requesting another ajax call).

VAN KD Over a year ago

@benfes I will also try with factory provider for my learning thanks for the help.

VAN KD Over a year ago

@benfes how should I change my view? I used your solution but noting is showing on screen. And also no errors in Console.

benfes Over a year ago

You shouldn't need to refactor your view, are you able to post up your code with the changes? Or provide an example on codepen or jsbin?

Collectives™ on Stack Overflow

How should I get the data from JSON into another angular js controller?

3 Answers 3

10 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related