ng-repeat array of objects nodejs

Question

I'm using angularJS with a node back-end that sends data using socketio. I'm then trying show the data using ng-repeat. If I initialise the data inside the controller then ng-repeat works fine, but if I add the data when it's receieved from the server, then nothing is shown on the screen when using ng-repeat.

Here's a snippet of the code I'm using: (trans.html)

<div id='trans' ng-app='MyApp'>
    <h1>Transactions</h1>
    <div class="pure-g-r" ng-controller='TransController'>
        <div class="pure-u-1-2" ng-repeat="trans in transactions">
            <h1>{{ trans.name }}</h1>
            <p>{{ trans.description}}</p>
            <p>{{ trans.date }}</p>
            <p>{{ trans.category }}</p>
        </div>
    </div>

</div>

<script src="/js/loadAngular.js"></script>

(controller.js)

  function TransController($scope, socket) {
    $scope.transactions = [];
    $scope.currentMonth = "March";
    $scope.categories = [];

    init();

    function init() {
        console.log("emitting init functs");
        socket.emit('data', {request: 'transactions', month: $scope.currentMonth});
        socket.emit('getCategories', {});
    };

    socket.on('dataResponse', function (data) {
        console.log(data);  
        if(data.response === 'transactions'){
            $scope.transactions = [];
            var tran = data.data;
            for(var i = 0; i < tran.length; i++){
                $scope.transactions.push(tran[i]);
                console.log(tran[i]);
            };
        }
        console.log($scope.transactions);
        console.log("CURRENT MONTH " + $scope.currentMonth);
    });

(server.js)

   var myTransactions = {
        January : [{
            name: "Tesco shopping",
            date: "January",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    }],
        February : [],
        March : [{
            name: "Booze shopping",
            date: "March",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    },{
            name: "Tesco shopping",
            date: "March",
            description: "This is my description, I went to the shop and bought loads of food.",
            category: "Food"
    }],
    ...
    };

    mudev.addCustomEvent('data', function(socket,data){
        var request = data.request;
        var month = data.month;
        console.log("Data Request: request:",request, " month:",month);
        if(month==null){
            socket.emit('dataResponse', {
                response: 'transactions',
                data: myTransactions
            });
        }else{
            socket.emit('dataResponse', {
                response: 'transactions',
                data: myTransactions[month]
            })
        }

    });

The only difference that I can see between the data is that when I statically initialise the data inside the controller, there is an extra key called 'HashKey' that isn't present when the data is sent from the server. I have read through the angular documentation again, but can't find anything about this problem.

Would appreciate any help. (this is not the same question as this ng-repeat over an array of objects)

have you tried to add $scope.$apply(); to the last line of dataResponse calback? — Eugene P.
– Eugene P., Commented Feb 13, 2014 at 10:31
Thank you, that seems to have solved it. I read about that a couple of weeks ago but completely forgot about it — mem27
– mem27, Commented Feb 13, 2014 at 10:35

Eugene P. · Accepted Answer · 2014-02-13 10:38:02Z

1

$scope.$apply();

for the function callback.

answered Feb 13, 2014 at 10:38

Eugene P.

2,63521 silver badges23 bronze badges

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

Comments

mem27 · Accepted Answer · 2014-02-13 10:38:57Z

0

As Eugene P suggested, adding $scope.$apply() refreshes the view to update the data. Adding this to the end of the dataResponse callback updated the data on screen.

This article (I had forgotten about) explains in a bit more detail using socketio with angular. http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

Thanks for the answers :)

answered Feb 13, 2014 at 10:38

mem27

2332 silver badges12 bronze badges

Collectives™ on Stack Overflow

ng-repeat array of objects nodejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related