web-dev-qa-db-fra.com

Analyser JSON et afficher les données dans Angular

J'ai un problème avec l'affichage des données JSON en angulaire. J'envoie avec succès des données du backend au frontend (angulaire), mais je ne peux pas les afficher.

J'ai essayé de simuler une situation similaire sur JSFiddle , même si j'ai déjà préparé des données depuis le backend following format

obtenir/envoyer des données -> Côté backend:

//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() });
    });
});

obtenir des données -> frontend (angulaire)

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);
               });
        }
    }])

Partie HTML avec directive ng-repeat:

<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>

Quelqu'un sait-il quel est le problème?

jsonangularjsnode.jsexpress
10
corry

Autant que je sache, vous stockez votre objet en JSON, mais vous ne le partez jamais. Par conséquent, en utilisant

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

au lieu de

$scope.messages = res;

devrait résoudre votre problème.

Voici une version JSFiddle qui fonctionne: https://jsfiddle.net/29y61wtg/5/

Notez que cela n'inclut pas un appel $ http, si vous rencontrez toujours des problèmes après avoir utilisé $ http, dites-le moi dans les commentaires.

14
Dodekeract