AngularJS - ng-repeat - using parent repeat data in child http request

Question

I have what would seem to be a simple problem with AngularJS - apologies if so. I'm new and have searched all over and can't quite find an answer to what I want to do.

Basically I have a $http request that is getting a list of 'Cards' from a server which I'm then using ng-repeat to build in the HTML. I then want to populate those Cards with a number of 'Metrics' - also retrieved from the server. I have a controller for the 'Cards' (parents) and a separate controller for the 'Metrics' (children).

My issue is that I can't work out how to reference the ID of the parent 'Card' when making the child $http request.

Below is the HTML & JS that I am using - any help would be appriciated:

HTML:

<div class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard">

    <div ng-repeat="Card in Dashboard.DashboardCards">

        <div class="DashboardCard card">
            {{Card.CardDisplayName}}

            <div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric">
                <div ng-repeat="Metric in Metric.DashboardMetrics">
                    {{Metric.MetricDisplayName}}
                </div>
            </div>

        </div>

    </div>

JS:

(function () {
    var app = angular.module('OtterDashboard', [ ]);

    app.controller('DahsboardCardController', [ '$http', function($http) {

        //Declare a varaible for the data
        var DashboardCards = this;

        //Set the varaiable to an empty array to receive the data
        DashboardCards.DashboardCards = [ ];

        $http({
            //Request the data
            method: 'GET',
            dataType: 'jsonp',
            url: '/api.svc/tbl_Card',
            useDefaultXhrHeader: false,
            headers: {'Content-type': 'application/json'},
            headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
            crossDomain: true,
        }).then(function successCallback(data) {
            //The data was sucessfully received, populate the variable with it
            DashboardCards.DashboardCards = data.data.d.results;
        }, function errorCallback(response) {
            //There was an error
            console.log('Card data could not be retrieved');
        });

    }]);

    app.controller('DahsboardMetricController',  ['$http', function($http, Card) {

        //Declare a varaible for the data
        var DashboardMetrics = this;

        //Set the varaiable to an empty array to receive the data
        DashboardMetrics.DashboardMetrics = [ ];

        $http({
            //Request the data
            method: 'GET',
            dataType: 'jsonp',
            url: '/api.svc/DashboardMetric?Card=%27' + **???reference to parent card ID???** + '%27',
            useDefaultXhrHeader: false,
                headers: {'Content-type': 'application/json'},
                headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
                crossDomain: true,
        }).then(function successCallback(data) {
            //The data was sucessfully received, populate the variable with it
            DashboardMetrics.DashboardMetrics = data.data.d.results;
        }, function errorCallback(response) {
            //There was an error
            console.log('Metric data could not be retrieved');
        });

    }]);

})();

Thank you!

Can you simplify this for us? Remove all the code that does not mattter — Bas Slagter
– Bas Slagter, Commented Oct 12, 2015 at 12:53
Thanks for the prompt reply Ben. I've cut down the HTML, sorry. I think everything in the JS is required. — Jay Tyler
– Jay Tyler, Commented Oct 12, 2015 at 12:58
dont know your card structure what I am guessing Card.id or Card.CardID? Can you actually post your Dashboard json — Jax
– Jax, Commented Oct 12, 2015 at 12:59
what is the reason for nested controller? A directive is probably more appropriate and keep in mind that ng-repeat creates a child scope — charlietfl
– charlietfl, Commented Oct 12, 2015 at 13:00

Emir Marques · Accepted Answer · 2015-10-14 15:43:00Z

0

EDIT 1

Use a service for shared variable between controllers. Look the example:

   app.controller('DahsboardCardController', ['$http', function($http, $sharedResource) {
        var DashboardCards = this;
        DashboardCards.DashboardCards = [ ];

        $http({
            method: 'GET',
            dataType: 'jsonp',
            url: '/api.svc/tbl_Card',
            useDefaultXhrHeader: false,
            headers: {'Content-type': 'application/json'},
            headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
            crossDomain: true,
        }).then(function successCallback(data) {
            DashboardCards.DashboardCards = data.data.d.results;
            $sharedResource.set("id", "<pass id value>");

        }, function errorCallback(response) {
            console.log('Card data could not be retrieved');
        });
    }]);

 app.controller('DahsboardMetricController',  ['$http', function($http, Card, $sharedResource) {
        var DashboardMetrics = this;

        DashboardMetrics.DashboardMetrics = [];

        $http({
            method: 'GET',
            dataType: 'jsonp',
            url: '/api.svc/DashboardMetric?Card=%27' + $sharedResource.get("id") + '%27',
            useDefaultXhrHeader: false,
            headers: {'Content-type': 'application/json'},
            headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
            crossDomain: true,
        }).then(function successCallback(data) {
            DashboardMetrics.DashboardMetrics = data.data.d.results;
        }, function errorCallback(response) {
            console.log('Metric data could not be retrieved');
        });
    }]);

    app.factory('$sharedResource', function () {
        var property = {};

        return {
            get: function (key) {
                return property[key];
            },
            set: function(key, value) {
                property[key] = value;
            }
        };
    });

EDIT 2

When working with angularjs is recomended use a one object for print object in table. Why this is a beautiful s2.

Look this example. To help you in development. Use the sample function pass the parentId in load(CardId). This function will run in the page load.

I too fix code html. You used the alias controller before input field of same.

var app = angular.module("App", []);

app.controller('DahsboardCardController', ['$scope', function($scope) {
        $scope.DashboardCards = [{
            CardId: "111",
            CardDisplayName: "Card 1"
        }, {
            CardId: "222",
            CardDisplayName: "Card 2"
        }, {
            CardId: "333",
            CardDisplayName: "Card 3"
        }];
    }
]);

app.controller('DahsboardMetricController', ['$scope', function($scope) {
        $scope.load = function(CardIdParent) {
            console.log(CardIdParent);
        };
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard">
    {{Dashboard.DashboardCards}}
    <div ng-repeat="Card in DashboardCards">
        <div class="DashboardCard card">
            {{Card.CardDisplayName}}
            <div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric"  ng-init="load(Card.CardId)">
                This a id parent: {{Card.CardId}}
                <div ng-repeat="MetricItem in DashboardMetrics">
                    {{MetricItem.MetricDisplayName}}
                </div>
            </div>
        </div>
    </div>
</div>

edited Oct 14, 2015 at 15:43

answered Oct 12, 2015 at 13:06

Emir Marques

2,6772 gold badges18 silver badges22 bronze badges

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

12 Comments

Jay Tyler Over a year ago

Thank you. I'm getting two errors when I try that: TypeError: Cannot read property 'set' of undefined TypeError: Cannot read property 'get' of undefined

Emir Marques Over a year ago

Edit my example. Try now!

Jay Tyler Over a year ago

Getting closer - error now "Unknown provider: CardProvider <- Card <- DahsboardMetricController". Thanks again.

Jay Tyler Over a year ago

Also, I'm not sure what I need to put where you've put "<pass id value>" - I assume some reference to the current Card ID but unsure how to reference that - apologies if I am being dumb!

Emir Marques Over a year ago

In id value pass reference the ID of the parent 'Card' . Look example now

|

Collectives™ on Stack Overflow

AngularJS - ng-repeat - using parent repeat data in child http request

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related