Can't display data from $http get with angular, django

Question

i have an application developed with Django in backend, where was created an API to can read information in the frontend with angular.

I'm calling with $http a list of persons in database, in the function i get the data, and display with console.log and is correct, but when i call that information in the template with ng-repeat, the content divs are created but the information inside not display, stays blank.

I will appreciate any sugestion to solve this.

// custom-angular.js

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

var URL = '/api/projects/torres-de-monterrey/segmentation/';

app.controller('cardsCtrl',['$scope', '$http', function($scope, $http) {

$scope.cards = [
    {email: '[email protected]', segment: 'low'}
];

$http({
  method: 'GET',
  url: URL
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    /*console.log(response.data);*/
    $scope.data = response.data;

    angular.forEach(response.data, function(value, key){
        console.log(key + ': ' + value.email + ' -- ' + value.segment);
        $scope.cards.push({email: value.email, segment: value.segment});
    });

  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

console.log($scope.cards);

}]);

// list.html

{% extends "base_app.html" %}
{% block main-container %}
    <h1>Actividades de hoy</h1>
    {% if activities %}
        {% for activity in activities %}
            {{activity.activity_type}}
        {% endfor %}
    {% else %}
        <p>No tienes actividades programadas para hoy</p>
        <hr />

        <div class="segmentBlocks">
            <div ng-app="SesamoApp">
                <div class="cards" ng-controller="cardsCtrl">
                    <div class="card" ng-repeat="card in cards | orderBy:'segment'">
                        <p class="email">{{ card.email }}</p>
                        <p class="segment">{{ card.segment }}</p>
                    </div>
                    {{ data }}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

Screenshot with the result after execution (No info)

Screenshot

console.log(key + ': ' + value.email + ' -- ' + value.segment); does it reproduces well in your console? — developer033
– developer033, Commented Jul 8, 2016 at 2:04

aldesabido · Accepted Answer · 2016-07-08 02:35:49Z

1

you should change your angular bracket {{ }} to {$ $} by adding this line in your app.js.

app.config(['$httpProvider', '$interpolateProvider',     function($httpProvider, $interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
}])

then do this

<div class="segmentBlocks">
        <div ng-app="SesamoApp">
            <div class="cards" ng-controller="cardsCtrl">
                <div class="card" ng-repeat="card in cards | orderBy:'segment'">
                    <p class="email">{$ card.email $}</p>
                    <p class="segment">{$ card.segment $}</p>
                </div>
                {$ data $}
            </div>
        </div>
    </div>

answered Jul 8, 2016 at 2:35

aldesabido

1,2882 gold badges18 silver badges38 bronze badges

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

2 Comments

miyamoto Over a year ago

It might be pride of authorship, but I feel this is an inferior solution to my answer. It's an unnecessary fix that adds unnecessary complexity and ngBind is also generally preferable over {{}} anyway. stackoverflow.com/questions/16125872/…

aldesabido Over a year ago

@miyamoto I never used ng-bind before. Gonna take a look at this one. Thanks!

miyamoto · Accepted Answer · 2016-07-08 02:24:46Z

1

I think the Django templating is parsing your brackets in the ngRepeat block as part of the Django template rather than leaving it for the Angular controller. Instead of using {{}} here, why not use ngBind and add ng-bind="card.email" and ng-bind="card.segment" attributes to your p tags?

Otherwise, escape the Django templating with a verbatim tag around the relevant angular blocks.

edited Jul 8, 2016 at 2:24

answered Jul 8, 2016 at 2:16

miyamoto

1,54010 silver badges16 bronze badges

Collectives™ on Stack Overflow

Can't display data from $http get with angular, django

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related