CODEWITHSUNDEEP
javascriptangularjs
Jordan Steinberg
Jordan Steinberg

Reputation: 41

AngularJS 1.5: Component won't load http data

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) {
        gridTableService.load(this.src).then(angular.bind(this,function(result){
            this.rows = gridTableService.getData();
            console.log(this.rows);
        }));
        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?

** UPDATES **

I have addresses the typos where "gridlet" was used in place of "gridTable" and fixed the re-initializing of the model in each of the files.

After some advice that I got regarding the scope, I did adjust the gridTable.component.js controller to use binding on the service call. What you see in the updated code is two console logs, the inner one shows correctly, the outer one shows as undefined. However, strangely enough, the outer one shows up first in the console. Any ideas?

Upvotes: 0

Views: 796

Answers (1)

Lucas Rodriguez
Lucas Rodriguez

Reputation: 1203

Every time you are instantiating the app like this:

 var app = angular.module('TestApp', []);

You are overriding it. You need to declare it once with the dependencies, and then reference to it like:

 var app = angular.module('TestApp');

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module

Check here

Upvotes: 1

Related Questions