バックエンドから渡されたデータを表すAngularJS Flaskバックエンド

Question

私は、mongodbにリンクしているpython /フラスコのバックエンドで角を使ったシングルページアプリケーションで作業しています。

私が抱えている問題は、フロントエンドで表示できないようなオブジェクトとして、角度から$ http get要求を使用してデータがバックエンドから渡された場合です。私はコンソールに表示することができますが、フロントエンドに表示されない理由については困惑しています。

工場で宣言されたJSONオブジェクトの配列を使用すると、情報は正常に通過しますが、バックエンドから取得したデータを使用すると表示されません。

私はまた、必要なデータをカールすることもできます。

は、任意の助けを事前にいただきありがとうございます:)

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

 <div class="card card-block"> 
 
     <l class="list" ng-repeat="post in list.posts"> 
 
      </br> 
 
      <h4 class="card-title">{{post.title}}</h4> 
 
      <p class="card-text">{{post.body}}</p> 
 
      <!--- the functionality of the below will be added towards end, time permitting--> 
 
      <a href="#/topic" class="btn btn-outline-primary">Like</a> 
 
      <a href="#/topic" class="btn btn-outline-primary">Comment</a> 
 
      </br 
 
     </l> 
 
     </div> 
 
    </div>

役立つかもしれないいくつかの追加情報： 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; 



})