json data not showing in template view AngularJS

Question

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:

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?

Angular views and controllers share data throught scope object. So whenever you have attached 'klanten' on the scope, it is available on your view. — Rafael Rocha
– Rafael Rocha, Commented Oct 23, 2015 at 14:51
yes that's true except I thought I had to show the data through the directive instead. The directive shows the "Naomi" data without any fuss. Is not possible to show the data using the directive instead? — Marco V
– Marco V, Commented Oct 23, 2015 at 14:52

Neil · Accepted Answer · 2015-10-23 14:58:44Z

1

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

edited Oct 23, 2015 at 14:58

answered Oct 23, 2015 at 14:44

Neil

3421 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Neil Over a year ago

You're getting the data from data/klanten.json. Is where you're requesting.

Marco V Over a year ago

so the directive is not necessary in this case? Redundant?

Neil Over a year ago

If you wanna use the directive, has a little bit more complexity. In this case should be redundant, but you can used if you want. (not like this)

Marco V Over a year ago

ok I'll accept the answer for now. If I need a directive in the future, I'll make a new question. Thanks a lot!

Collectives™ on Stack Overflow

json data not showing in template view AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related