从 http 获取 json 服务的角度答案

【问题标题】：angular to fetch the json service from http从 http 获取 json 服务的角度
【发布时间】：2018-11-07 17:22:53
【问题描述】：

我的 js 用于 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());
    }

});

【问题讨论】：

您可能还想添加相关的 HTML。就目前而言，我只能猜测这是因为您的代码集$scope.posts（这是一个数组？），而不是$scope.post
我们可以看到帖子的 JSON 和您的视图 html 吗？
我的 html 以：
开头，然后我尝试使用
{{post.title}}

【解决方案1】：

我看到了您共享的密码笔。所以 Ricky，因为你是 angularJS 的新手，我建议你从这里阅读与 angular 1 相关的文档：Angular JS - Documentation

现在满足您的要求，您需要调用外部 API 并使用结果中的数据。为此，您必须了解 angularJS 中的 $http：$http documentation

来到代码，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"。它的文档在这里ng-repeat

所以你的 html 应该是这样的结构：

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

现在轮到你学习和实施了。

【讨论】：

嘿哈桑 - 哇 - 非常感谢详细的解释和回答 - 我真的很感激。你的解释现在完全有道理了。谢谢！
@Richy，如果您的查询已完成，请接受它作为答案，谢谢