Angular.js render data in controller

Question

I have a rather simple question. I have a simple controller and its $scope.coords = []; renders JSON in HTML:

[24.43359375, 54.6611237221]
[25.2905273438, 54.6738309659]
[25.3344726562, 54.6102549816]
[25.2685546875, 54.6801830971]
[25.2960205078, 54.6611237221]

How can I render that JSON not in html, but in my controller itself ? The code looks like that. Please see the comment in code:

propertyModule.controller('propertyController', ['$scope', 'Property', function ($scope, Property) {

        // Query returns an array of objects, MyModel.objects.all() by default
        $scope.properties = Property.query();

        // Getting a single object
        $scope.property = Property.get({pk: 1});

        $scope.coords  = [];

        $scope.properties = Property.query({}, function(data){

        console.log(data);

        angular.forEach(data , function(value){

            $scope.coords.push(value.coordinates);

        });

        });

        $scope.positions =  //$Resource('realestate.property').items();

        [

        [54.6833, 25.2833], [54.67833, 25.3033] // those coordinates are hardcoded now, I want them to be rendered here by $scope.coords


        ];


    }]);

What you want is unclear for me. Your controller is not a console that you can use to display values. Now if you want access to what's inside $scope.coords, you can use something like angular.forEach($scope.coords , function(coordinate){console.log(coordinate);}); — Goodzilla
– Goodzilla, Commented Jul 23, 2014 at 14:21
I am sorry that I am replying just now... I will write in in a different way :) You see, I want $scope.positions to fetch data from $scope.coords (as you can see from the code, $scope.coords will contain JSON), so I wont need to hardcode those coords into the $scope.positions... — Eimantas
– Eimantas, Commented Jul 24, 2014 at 7:01

Goodzilla · Accepted Answer · 2014-07-25 12:49:24Z

First off, you're showing us a bunch of arrays, not a JSON document. But since your code seems to be working, I'll assume you do have a valid JSON to work with.

You need to consider the fact that you are making an asynchronous request here :

$scope.properties = Property.query({}, function(data) {

    console.log(data);

    angular.forEach(data , function(value){
        $scope.coords.push(value.coordinates);
    });

});

This means you won't be able to fetch data from $scope.coords before anything has arrived.

There are several ways to solve that :

You could simply fetch data while you're still in the loop :

angular.forEach(data , function(value) {
    $scope.coords.push(value.coordinates);
    if('your condition') {
        $scope.positions.push(value.coordinates);
    }    
});

You could use a promise, see the angular doc.
Or you could watch over $scope.coords with $scope.$watch.

Collectives™ on Stack Overflow

Angular.js render data in controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related