CODEWITHSUNDEEP
angularjs
sojim2
sojim2

Reputation: 1307

AngularJS global search not working

Here's the global search function I'm trying to emulate: https://plnkr.co/edit/DRagFo?p=preview

Here's my attempt: https://plnkr.co/edit/n4aczq?p=preview

They are written slightly differently but I can't seem to figure out why the global search doesn't work. I believe it has to do with $scope.parsedEntries.push(parse(content)); in script.js:

angular.module('myApp', ['smart-table','lrDragNDrop'])
    .controller('mainCtrl', ['$scope', '$timeout', '$http',
        function ($scope, $timeout, $http) {

                        var url = 'https://spreadsheets.google.com/feeds/list/1O7M5gaEGlyE5gkOBARJrxJJMBYiTwz2THVjgbaTx9v8/od6/public/values?alt=json';
            var parse = function (entry) {
                console.log(entry);
                var description = entry.gsx$description.$t;
                var cause = entry.gsx$cause.$t;
                return {

                    description: description,
                    cause: cause
                };
            };
            $http.get(url)
                .then(function (response) {
                    var entries = response.data.feed.entry;
                    $scope.parsedEntries = [];
                    for (var key in entries) {
                        var content = entries[key];
                        $scope.parsedEntries.push(parse(content));

                    }
                });

        }
    ]);

Thanks in advance.

Upvotes: 0

Views: 91

Answers (1)

bhantol
bhantol

Reputation: 9616

The problem is not related to how you populate parsedEntries in script.js.

It has to do with the premature initialization of the directive st-table which depends on the value of parsedEntries which is a null reference in the beginning but gets populated later after the $http.get.

In the example everything works because the row data is all available to the st-table uppfront. You can say that is is the defect of the st-table however a small trick can get you going.

You may choose to defer the initialization of the st-table by introducing ng-if="ready" or something. Then set ready=true only in the $http.get.then() after the values are fetched.

<div class="table-container" ng-if="ready">

and the then() function

              $http.get(url)
                .then(function (response) {
                    var entries = response.data.feed.entry;
                    $scope.ready = true;//populate this ready
                    $scope.parsedEntries=[];
                    for (var key in entries) {
                        var content = entries[key];
                        $scope.parsedEntries.push(parse(content));

                    }
                });

$scope.parsedEntries=[];

Working plnkr

Upvotes: 1

Related Questions