JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了解析JSON并在Angular中显示数据大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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',-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.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>

谁会知道问题是什么?

解决方法

据我所知,你将对象存储为JSON,但你永远不会解析它.因此使用
$scope.messages = JSON.parse(res);

代替

$scope.messages = res;

应该解决你的问题.

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

请注意,这不包括$http调用,如果您在使用$http后仍然遇到问题,请在评论中告诉我.

大佬总结

以上是大佬教程为你收集整理的解析JSON并在Angular中显示数据全部内容,希望文章能够帮你解决解析JSON并在Angular中显示数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。