CODEWITHSUNDEEP
javascriptjsonangularjs
Marco V
Marco V

Reputation: 2623

json data not showing in template view AngularJS

So I've been trying to display the data from a json file in the template but for some reason, the data is not displaying.

Code from app/js/controllers/controllers.js

angular.module('myApp.views', ['ngRoute'])

.controller('dashboardCtrl', function($scope, $http) {

    $http.get('data/klanten.json')

    .success(function(data) {
        $scope.klanten = data;
        console.log($scope.klanten);
    });

    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'    
    };

    //$scope.test = 9 * 5;

    //console.log($scope.klanten);

}).directive('myCustomer', ['$http', function($http) {
        //console.log($scope.klanten);
        return {
            template: 'Name: {{ klanten.voornaam }} Address: {{customer.address}}'
        };

}])

This is the code from the view template located in: app/view/dashboard/dashboard.html

<div class="container navbar-default">
        <nav role="navigation">
          <ul class="nav nav-pills">
            <li><a href="#/views/dashboard">Dashboard</a></li>
            <li><a href="#/views/profiel">Mijn profiel</a></li>
            <li><a href="#/views/transacties">Mijn transacties</a></li>

            <li><a href="#">Uitloggen</a></li>
          </ul>
        </nav>

      </div>

<p>This is the partial for view 1.</p>

<p>{{ test }}</p>

<p>
    <div ng-controller="dashboardCtrl">
        <div my-customer></div>
    </div>
</p>

And this is how it looks in the front-end:

enter image description here

The $scope.customer is just test data. What I really want is to how the data from the json file. What am I doing wrong?

Upvotes: 0

Views: 622

Answers (1)

Neil
Neil

Reputation: 342

You don't have {{test}} in your scope. Try to write {{klanten}} in your view.

It should work.

You are using that kind of AngularJS request: https://docs.angularjs.org/api/ng/service/$http#shortcut-methods

Upvotes: 1

Related Questions