Parse JSON and show data in Angular

Question

I have a trouble with displaying JSON data in Angular. I successfully send data from backend to frontend (Angular), but I cannot display them.

I tried to simulate a similar situation on JSFiddle, although I already have prepared data from backend following format

get/send data -> Backend side:

//push data to Redis
var messages= JSON.stringify(
    [
        {
            "name": "Msg1",
            "desc": "desc Msg1"
        },
        {
            "name": "Msg2",
            "desc": "desc Msg2"
        },
        {
            "name": "Msg3",
            "desc": "desc Msg3"
        },
        {
            "name": "Msg4",
            "desc": "desc Msg4"
        }
    ]);
    redisClient.lpush('list', messages, function (err, response) {
        console.log(response);
    });

//get from redis and send to frontend
app.get('/messages', function(req, res){
    // Query your redis dataset here
    redisClient.lrange('list', 0, -1, function(err, messages) {
        console.log(messages);
       // Handle errors if they occur
       if(err) res.status(500).end();
       // You could send a string
       res.send(messages);
       // or json
       // res.json({ data: reply.toString() });
    });
});

get data -> frontend (Angular)

angular.module('app')
    .controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
        'use strict';

        getFromServer();
        function getFromServer(){
          $http.get('/messages')
               .success(function(res){
                   $scope.messages= res;
                   console.log(res);
               });
        }
    }])

HTML part with ng-repeat directive:

<div ng-app="app" ng-controller="MainCtrl" class="list-group">
    <div class="list-group-item" ng-repeat="item in messages">
        <h4 class="list-group-item-heading">{{item.name}}</h4>
        <p class="list-group-item-text">{{item.desc}}</p>
    <div>
</div>

Would anyone know what the problem is?

Can you share your entire HTML (index.html or whatever it happens to be)? — MattDionis
– MattDionis, Commented Jul 14, 2015 at 19:20
Your response appears to be an array of strings by the looks of the console output. @Dodekeract has the right answer, you just have to do res[0] as well. — Nik Klassen
– Nik Klassen, Commented Jul 14, 2015 at 19:28

Florian Wendelborn · Accepted Answer · 2015-07-14 19:28:14Z

21

As far as I can see, you're storing your Object as JSON, but you never parse it. Therefore using

$scope.messages = JSON.parse(res);

instead of

$scope.messages = res;

should fix your problem.

Here is a working JSFiddle version of yours: https://jsfiddle.net/29y61wtg/5/

Note, that this doesn't include a $http call, if you're still having problems after using $http, tell me in the comments.

edited Jul 14, 2015 at 19:28

answered Jul 14, 2015 at 19:16

Florian Wendelborn

1,7671 gold badge21 silver badges30 bronze badges

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

2 Comments

corry Over a year ago

Thank you guys. I have another question and I'm not sure should I open a new question... Does anyone has experience with combination of socketio and redis? I would like to listen on the server for new data (for example message 5) and emit it to the client. I already include angular-socket-io on the client, but I don't have idea how to connect data from redis in socket.

Florian Wendelborn Over a year ago

You should open a new question for that. I'm probably the only user who will see this comment for some time.

Collectives™ on Stack Overflow

Parse JSON and show data in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related