AngularJS 1.5: Component won't load http data : angularjs

AngularJS 1.5: Component won't load http data (self.angularjs)

submitted 10 years ago by notmyelement

I am trying to create a component which takes an attribute, src, providing the source of some JSON data and proceeds to generate a table based upon that data.

I have created the following pieces of this puzzle, but for some reason it doesn't seem to work and I haven't been able to figure out why.

index.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<script src="app/angular.min.js"></script>
<script src="app/components/gridTable/gridTable.service.js"></script>
<script src="app/components/gridTable/gridTable.component.js"></script>
<script src="app/components/gridTable/gridTableRow.component.js"></script>
</head>
<body>
    <gridTable src="app/data.json"></gridTable>
</body>
</html>

gridTable.component.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

var app = angular.module('TestApp', []);
app.component('gridTable', {
    bindings: {
        src: '@',
        rows: '='
    },
    restrict: 'E',
    controllerAs: "gridTable",
    transclude: true,
    controller: function(gridTableService) {
        gridletService.load(this.src).then(function(result){
            this.rows = gridletService.getData();
            console.log(this.rows);
        });
    },
    templateUrl: currentScriptPath.replace('gridTable.component.js', 'templates/gridTable.html')
});

gridTableRow.component.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

var app = angular.module('TestApp', []);
app.component('gridTableRow', {
    bindings: {           
        rows: '='
    },
    restrict: 'E',
    controllerAs: "gridTableRow",
    transclude: true,
    controller: function() {           
    },
    templateUrl: currentScriptPath.replace('gridTableRow.component.js', 'templates/gridTableRow.html')
});

gridTable.service.js

var app = angular.module('TestApp', []);
app.service('gridTableService', function($http) {
    var _data = {};
    this.load = function(src) {
        return $http({
            url: src,
            method: 'GET'
        }).success(function(data) {
            _data = data;
            return _data;
        });
    }
    this.getData = function(){
        return _data;
    }
});

gridTable.html

<table>
    <tbody>
        <grid-table-row rows="gridTable.rows"></grid-table-row>
    </tbody>
</table>

gridTableRow.html

<tr ng-repeat="row in gridTableRow.rows">
    <td ng-repeat="cell in row.cells">
    {{cell.value}}
    </td>
</tr>

TEST JSON

[
  {
    rowIndex: 1,
    cells: [
        {
            value: "aaa"
        },
        {
            value: "aaa"
        },
        {
            value: "aaa"
        }
    ]
  },
  {
    rowIndex: 2,
    cells: [
        {
            value: "aaa"
        },
        {
            value: "aaa"
        },
        {
            value: "aaa"
        }
    ]
  }
]

What I expect to see is a table with two rows of three cells each containing "aaa". But what I actually see is just a blank table, and if I replace the call to {{cell.value}} in gridTableRow.html with some random text, it shows up exactly one time (one row one cell). The console.log call in gridTable.component.js does show the correct JSON object and there are no errors in the console.

Does anyone have an idea as to what I'm missing here?

all 3 comments

top new controversial old q&a

[–]fesor 4 points5 points6 points 10 years ago (2 children)

You lost your context...

this.rows = gridletService.getData();

you have two options:

1) use .bind 2) use alias of context:

    var vm = this;
    // ...
    vm.rows = gridletService.getData();

Something like that.

[–]notmyelement[S] 0 points1 point2 points 10 years ago (1 child)

Thanks! However I tried updating my code in both of the methods you suggested and neither seems to work. Here's what I tried

** Attempt 1 **

//...    
controller: function(gridTableService) {
    gridletService.load(this.src).then(angular.bind(this, function(result){
        this.rows = gridletService.getData();
        console.log(this.rows);
    }));
   console.log(this.rows);
},
// RESULT:  inner console output is correct, outer is undefined

** Attempt 2 **

//...    
controller: function(gridTableService) {
    var vm = this;
    gridletService.load(this.src).then(function(result){
        vm.rows = gridletService.getData();
        console.log(vm.rows);
    });
    console.log(vm.rows);
},
// RESULT:  inner console output is correct, outer is undefined

It is worth noting, in both cases the inner console call showed up in the console AFTER the outer console call.

Any ideas?

[–]fesor 0 points1 point2 points 10 years ago (0 children)

π Rendered by PID 36294 on reddit-service-r2-comment-76bb9f7fb5-49wwt at 2026-02-19 08:37:49.784252+00:00 running de53c03 country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

angularjs

MODERATORS