不能用angularjs获取json数据


Can not take json data with angularjs

http://moviestolike.pe.hu/get_all_products.php

我想获取这些数据并在索引中打印屏幕.html:

  <!DOCTYPE html>
<html ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body>
<div class="form-group" ng-controller="todoController">

    <p>Movie list page</p>
    <br>
    <p>click button to see movies</p>

    <div class="form-group" >
        <div class="col-sm-10 col-sm-offset-2">
            <button type="submit" class="btn btn-primary" ng-click="count = count + 1" ng-init="count=0">
                <span class="fa fa-check"></span> count list movie</button>
            <span>
  count: {{count}}
</span>
            <button type="submit" class="btn btn-primary" ng-click="listMovie()">
                <span class="fa fa-check"></span> list movie</button>
        </div>
    </div>
    <p>the Movis you want to list is:</p>
    <p>list :{{list}}</p>

     <p>{{listed}}</p>
      <p>ss {{tasks}}</p>
</div>
</body>
</html>

我正在这个角度.js文件中做

    /**
 * Created by caneraydin on 16.03.2016.
 */
var app=angular.module('todoApp',[]);
app.controller('todoController',function($scope,$http){
 var urlBase="";
 $scope.toggle=true;
 $scope.selection = [];
 $scope.statuses=['ACTIVE','COMPLETED'];
 $scope.priorities=['HIGH','LOW','MEDIUM'];
 $http.defaults.headers.post["Content-Type"] = "application/json";
    $scope.addMovie=function(title,actors){
        $scope.title="title clicked "+title
        $scope.actors="actors clicked "+actors
        $scope.added="the movie '"+title+"' with those actors '"+actors+"' added successfully"
    },
    $scope.deleteMovie=function(id){
        $scope.id="id clicked "+id

        $scope.deleted="the movie with id '"+id+"' deleted successfully"
    },
    $scope.listMovie=function(list){
       $scope.tasks=[];
      $scope.list="list clicked"
       $scope.list="list+list"+list
      $scope.listed="the movies are listing:"+list
              $http.get( 'http://moviestolike.pe.hu/get_all_products.php').
            success(function (data) {
             $scope.tasks=data.name


}); 
};
  })

在列表电影中,但它无法发布数据。

我试图更改为数组,但仍然相同。

http://plnkr.co/edit/5xTe6v?p=preview

我根据注释更改了代码,但它仍在继续。它无法显示 JSON 数据。

当我制作

 function myError(response) {
    $scope.check = response;
     }); 

我明白这个:

{"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://moviestolike.pe.hu/get_all_products.php","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}

调用返回的数据没有直接的 name 属性。请将您的代码更改为此

$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
            success(function (data) {
             $scope.tasks=data.products;
}); 

在您的 HTML 中,您可以直接查看您的任务,如下所示

<p>ss {{tasks | json}}</p>

或按此方式查看每个产品

<div ng-repeat="prod in tasks">Name: {{prod.name}}</div>

编辑

在你的 plunker 中,看到控制台,它说

XMLHttpRequest cannot load http://moviestolike.pe.hu/get_all_products.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.

这意味着 CORS 在服务器上不可用,因此您无法从访问的位置访问它(plunkr 也是如此)

您需要在后端启用 CORS。

您可以从以下链接获得有关此方面的帮助:https://remysharp.com/2011/04/21/getting-cors-working

根据 http://moviestolike.pe.hu/get_all_products.php 的回应

{"products":[{"pid":"1","name":"sogan","price":"19.30","created_at":"2016-03-12 15:08:38","updated_at":"0000-00-00 00:00:00"},{"pid":"2","name":"faltak","price":"22.00","created_at":"2016-03-12 15:08:38","updated_at":"0000-00-00 00:00:00"}],"success":1}

您应该更改此内容:

$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
        success(function (data) {
         $scope.tasks=data.name}); 

对此:

 $http.get( 'http://moviestolike.pe.hu/get_all_products.php').
        success(function (data) {
         $scope.tasks=data.products }); 

或者这个:

 $http.get( 'http://moviestolike.pe.hu/get_all_products.php')
        .then(function (response) {
         $scope.tasks=response.data.products 
   });