web-dev-qa-db-ja.com

JSONを解析し、Angularでデータを表示します

AngularでJSONデータを表示するのに問題があります。バックエンドからフロントエンド（Angular）にデータを正常に送信しましたが、表示できません。

JSFiddle で同様の状況をシミュレートしようとしましたが、すでにバックエンドからデータを準備しています following format

データの取得/送信->バックエンド側：

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

データの取得->フロントエンド（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);
               });
        }
    }])

Ng-repeatディレクティブを使用したHTMLパーツ：

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

誰が問題が何であるか知っていますか？

jsonangularjsnode.jsexpress
10
corry

私が見る限り、あなたはオブジェクトをJSONとして保存していますが、解析することはありません。したがって、使用

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

の代わりに

$scope.messages = res;

あなたの問題を修正する必要があります。

以下は、動作するJSFiddleバージョンです。 https://jsfiddle.net/29y61wtg/5/

$ httpを使用しても問題が解決しない場合は、これに$ http呼び出しが含まれていないことに注意してください。コメントで教えてください。

14
Dodekeract