Question

我正在使用带有python / flask后端的angular的单页应用程序链接到mongodb。

我遇到的问题是，一旦数据从后端传递，使用来自angular的$ http get请求作为对象，我似乎无法在前端显示。我可以在控制台中显示它，但我很困惑为什么它不会显示在前端。

当我在工厂中使用声明的JSON对象数组时，信息会很好地通过，但是当使用从后端获取的数据时，它不会显示。

我也可以卷曲请求所需的数据。

提前感谢您的帮助：）

＆＃13;

NULL

＆＃13;

.controller('topicCtrl', function(posts, $scope){
    "use strict";
        var p = this;
    
    p.posts = posts.getPosts();
                      
})

.factory('posts', function(data){
    "use strict";
    var posts={};
    posts.item = data.response;    
    /* 
        - Add post function below - 
        post title & body to be entered 
        by the user. 
        
        The posts here will need to be passed down to a lower
        layer, with aim of sending JSON Object w/ post request to
        api.
    */
   posts.getPosts = function(){
        posts.item = data.getData();
   };
   posts.addPost = function(title, body){     
        data.postData(posts.item.push({title: title, body: body}));
   };
    
    return posts;
});

.factory('data', function($http, $log){
    "use strict";
    
    var data = {};
    /*data.item = [{id: 1, title:"An Intro to A!", body:"Hello there AAA! :) "},
    {id: 2, title:"An Intro to B!", body:"Hello there BBB! :)"},
    {id: 3, title:"An Intro to C!", body:"Hello there! ccc:)"}   
    ];*/
    
        data.getData = function(){
            var i = 0;
            $http({
                method: 'GET',
                url: '/h',
                type: 'application/json'
            }).then(function success(response){
                $log.info("1 get", response);
                
 
                    data = response.data;
                    $log.info(data.response);
                          
            }, function error(response){
                $log.info(" damn"+response);
            });
        };
    
        data.postData = function(data){
            $http({
                method: 'POST',
                url: '/h'
            }).then(function sucess(response){
                $log.info(" hello from post"+response);
                data.item = JSON.stringify(data.item);
            }, function error(response){
                $log.info(" damn from post "+response);
            });
        };
        
        return data;
    });

＆＃13;

一些可能有用的其他信息： image of the console

Answer 1

我对下面的代码做了一些更改。一些变化可行。

   .controller('topicCtrl', function(posts, $scope){        

    $scope.posts = [];

    $scope.getPosts = function() {
    posts.getPosts().then(function(response){
        //success
        console.log("Success Get");
        console.log(response);
        $scope.posts = response;
    }, function(error){
        //error
        console.log("error");
    });

};

})

.factory('posts', function(data){
    "use strict";
    var posts={};

   posts.getPosts = function(){
        return data.getData();
   };

    return posts;
});

.factory('data', function($http, $log){
    "use strict";

    var data = {};


        data.getData = function(){
            $http({
                method: 'GET',
                url: 'http://127.0.0.1:5000/h',
                type: 'application/json'
            });
        };



        return data;
    });

Answer 2

对于将来可能需要它的人！ :) 我添加了一个for循环，它遍历响应数据并将每个元素存储到一个数组中然后返回该数组。

     data.getData = function(){
         var i;
         var myObj = [];
            $http({
                method: 'GET',
                url: '/h'
            }).then(function success(response){
                $log.info(" hello the get", response.data);
                for (i = 0; i < response.data.length; i++){
                    myObj[i] = (response.data[i]);
                }
                if(response.data.length === 0){
                    $log.info("empty set");
                }else{
                    //data.item = response.data;
                    $log.info("SUCCESS!!" + myObj);
                }            
            }, function error(response){
                $log.info(" damn"+response);
            });
            return myObj;
        };

.factory('posts', function(data, $log){
    "use strict";
    var posts={}; 

    posts.item = data.getData();

   posts.addPost = function(title, body){     
        data.postData(posts.item.push({title: title, body: body}));
   };
        $log.info("in the posts" + posts.item);
    return posts;
});

.controller('topicCtrl', function(posts){
    "use strict";
        var p = this;

    p.posts = posts.item;



})

AngularJS w / Flask后端，代表从后端传递的数据

2 个答案: