Angularjs 从http获取json服务

我使用js for angular从http获取json服务，并使用html上的{{post.title}}获取数据并发布到html中

数据没有显示在html页面上-使用代码笔

var app = angular.module("blogApp", []); 
app.controller("mainCtrl",      function($scope) {
$scope.posts = []; 
let postsUrl ="https://jsonplaceholder.typicode.com/posts"
    getPosts().then(posts =>{
        $scope.posts = posts.slice(3);
        $scope.$apply();
    });

    function getPosts(){
        return fetch(postsUrl).then(res=>res.json());
    }

---

}))

我看到了你共享的代码笔。因此，Ricky由于您是angularJS的新手，我建议您从这里阅读与Angular1相关的文档：

现在谈到您的需求，您需要调用一个外部API并使用结果中的数据。为此，您必须了解angularJS中的

$http

：

在代码中，angular支持依赖项注入。您共享的代码对我来说是个谜，就像

fetch（postsUrl）

函数在做什么一样？申报单在哪里

简而言之，实现应该清晰易读。这是我的重构版本：

var app = angular.module("blogApp", []); //here you defined the ng-app module

//you are initializing a controller, you need to inject $http for calling the API 
app.controller("mainCtrl", function($scope, $http) {

        //Declaration of the posts object
        $scope.posts = [];

        //Onetime initialization of the API Endpoint URL
        let postsUrl ="https://jsonplaceholder.typicode.com/posts";

        //A method for getting the posts
        function getPosts(){

           //We are calling API endpoint via GET request and waiting for the result which is a promise 
           //todo: Read about the Promises
           //A promise return 2 things either a success or a failure callback, you need to handle both. 
           //The first one is success and the second one is a failure callback
           //So in general the structure is as $http.get(...).then(successCallback, failureCallback)  
            $http.get(postsUrl).then(function(response){

               //In promises you get data in the property data, for a test you can log response like console.log(response)
               var data = response.data;

               $scope.posts = data; //Storing the data in the posts variable

                //Note: you don't need to call the $scope.$apply() because your request is with in the angular digest process. 
                //All the request which are outside the angular scope required a $apply()
            }, function(err){
               //log the err response here or show the notification you want to do
            });
        }

        //The final step is to call that function and it is simple
        getPosts();         

});

进入第二部分显示数据。您必须使用ng repeat文档，它的格式为

ng repeat=“var item in collection track by$index”

。它的文档在这里

因此，您的html应该位于以下结构中：

<div  ng-repeat="var post in posts track by $index"> 
    {{post.userid}}
    {{post.id}}
    {{post.title}}
    {{post.body}}
</div> 

{{post.userid}
{{post.id}
{{post.title}
{{post.body}

---

现在您需要学习和实现。

您可能还需要添加相关的HTML。目前，我只能猜测这是因为您的代码设置了

$scope.posts

（哪一个是数组？），而不是

$scope.post

我们可以看到posts的JSON和您的视图html吗？我的html以：开头，然后我尝试使用{post.title}调用post数据@mediaguru json是一项服务，因为我正在使用codepen进行编码，我在上面的html评论中省略了标题标记。嘿，Hassaan-哇-非常感谢您的详细解释和回答-我非常感谢。你的解释现在完全有道理了。谢谢大家!@Richy，如果您的问题已经解决，请接受它作为答案谢谢