解析 JSON 并在 Angular 中显示数据

Posted 2023-03-07

【中文标题】解析 JSON 并在 Angular 中显示数据

【英文标题】：Parse JSON and show data in Angular

【发布时间】：2015-10-03 14:24:45

【问题描述】：

我在 Angular 中显示 JSON 数据时遇到问题。我成功地将数据从后端发送到前端（Angular），但我无法显示它们。

我尝试在JSFiddle 上模拟类似的情况，尽管我已经从后端 准备了数据

获取/发送数据 -> 后端：

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

有谁知道问题出在哪里？

【问题讨论】：

尝试使用 $scope.messages = JSON.parse(res);

您能分享您的整个 HTML（index.html 或其他任何内容）吗？

从控制台输出的外观来看，您的响应似乎是一个字符串数组。 @Dodekeract 有正确的答案，你只需要做 res[0] 。

【参考方案1】：

据我所知，您将对象存储为 JSON，但您从不解析它。因此使用

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

而不是

$scope.messages = res;

应该可以解决您的问题。

这是您的 JSFiddle 版本：https://jsfiddle.net/29y61wtg/5/

请注意，这不包括 $http 调用，如果您在使用 $http 后仍然遇到问题，请在 cmets 中告诉我。

【讨论】：

谢谢你们。我还有一个问题，我不确定我是否应该提出一个新问题......有没有人有使用 socketio 和 redis 组合的经验？我想在服务器上监听新数据（例如消息 5）并将其发送给客户端。我已经在客户端包含了 angular-socket-io，但我不知道如何在套接字中连接来自 redis 的数据。

您应该为此打开一个新问题。我可能是唯一会在一段时间内看到此评论的用户。