How to add built.io query data to Angularjs $scope

Question

I am new to Angular and am trying to get data from a built.io class and add it to $scope in angular. I have worked through all the beginning Egghead examples and AngularJS tutorials but haven't worked this out yet. Console shows that the json is returned but my attempts to add this json to $scope haven't been successful. I think I should be doing this with a promise and have tried several times with no luck. The basic html is:

<!doctype html>
<html ng-app="Built">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://raw.githubusercontent.com/raweng/built.io-geoquery-playground/master/js/builtio.js"></script>
    <script src="builtapp.js"></script>
    <link rel="stylesheet" href="bootstrap.css">
    <script>
        Built.initialize('blt90ca3ef1fcb6f354', 'CIC001');
    </script>
</head>

<body ng-controller="MainCtrl">
    <div>
        <div ng-repeat="client in clients">
            {{ client.get('name') }}
        </div>
    </div>
</body>

</html>

and the js:

angular.module('Built', [])
    .controller('MainCtrl', function($scope) {

        $scope.client = null;

        var myQuery = new Built.Query('Client');
        myQuery.exec({
            onSuccess: function(data) {
                // projects is array of Built.Object
                // here's the object we just created
                $scope.clients = data;
            },
            onError: function(err) {
                // error occured
            }
        });

    });

I have created a fiddle at: https://jsfiddle.net/o2oxuz12/9/

Just updated the fiddle to include an alert showing an item of data.

Hi, the problem is that the code doesn't work as there is no value for $scope.clients when ng-repeat is actioned. The fiddle is set up correctly and is receiving data. You can test by adding alert(data); in the on success function. This is the problem that I wish to resolve. — Zumojugo, Mar 23 '15 at 06:21
Your fiddle is not working as its not able to load builtio.js file as its mime-type is text/html — Kushal, Mar 23 '15 at 06:25
The builtio.js file sets up the data import for built.io. Without it working there would be no data. If you inspect the response in the network tab in inspector when loading the fiddle you can see the data. — Zumojugo, Mar 23 '15 at 06:40

score 1 · Accepted Answer · edited May 23 '17 at 12:04

If anyone else should come across the same problem, I finally found an answer here: AngularJS view not reflecting $scope.model, though data is being set.

query.exec({
  onSuccess: function(clients) {
    // projects is array of Built.Object
    // here's the object we just created
    $scope.$apply(function(){
      $scope.clients = clients;
    });
  }
})

Updated fiddle. https://jsfiddle.net/o2oxuz12/10/

I will leave this as unanswered for a couple of days as I think the solution I've found is a bit hacky and someone may have a better answer.

Kushal · Answer 2 · 2015-04-13T07:17:18.233

0

angular.module('Built', [])
    .controller('MainCtrl', function($scope) {

        $scope.client = null;

        var myQuery = new Built.Query('Client');
        myQuery.modelType(Built.Object.NONE);
        myQuery.exec({
            onSuccess: function(data) {
                // projects is array of Built.Object
                // here's the object we just created

                $scope.$apply(function(){
                    $scope.clients = data;
                })
            },
            onError: function(err) {
                // error occured
            }
        });

    });

edited Apr 13 '15 at 07:17

answered Mar 23 '15 at 06:40

Kushal

1,360
6
16

This still isn't working for me. Does this show the client name in the Fiddle when you do it? Please feel free to update the fiddle. – Zumojugo Mar 23 '15 at 07:53

How to add built.io query data to Angularjs $scope

2 Answers2