Question

enter image description here我无法使用Angular Js从Json文件中检索数据。我试图使用角度Js中的点击功能从URL获取Json数据，并且当单击按钮时在表格中添加空tr tr。

 <!doctype html>
    <html lang="en" ng-app="sampleapp">
      <head>
       {% load staticfiles %}   
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="{% static 'bootstrap/js/angular.min.js'%}"></script>
        <script  type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js'%}"></script>
        <script src="{% static 'bootstrap/js/bootstrap.min.js'%}" type="text/javascript"></script>
        <script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>
      </head>
      <body >

            <div class="col-sm-12" ng-controller="tablejsonCtrl">
                 <button class="clickbutton" ng-click="jsonclick();">Show-json</button>
                 <table rule="all" class="table table-bordered table-hover ">
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Calories</th>
                        <th>isbest</th>
                    </tr>
                    <tr ng-repeat="value in students.breakfast_menu.food">
                        <td>{{value.name}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.description}}</td>
                        <td>{{value.calories}}</td>
                        <td>{{value.isbest}}</td>
                    </tr>
                 </table>

            </div>
      </body>
    </html>

var app =angular.module('sampleapp', [])    
app.controller("tablejsonCtrl", function ($scope, $http) {        
    $scope.jsonclick = function () {
        var url = "http://127.0.0.1:8000/static/waste/test.json";
        $http.get(url).then(function(response) {
            $scope.students = response.data;
        });

      }
});

Answer 1

而不是使用＆＃34; .then＆＃34;尝试使用.success方法，所以替换它：

   $http.get(url).then(function(response) {
        $scope.students = response.data;
    });

用这个：

$http.get('url').success(function (response){
    $scope.students= response;
});

Answer 2

您可以在本地使用HTTP请求。仅适用于1.6以上的角度版本

$http.get('./path-to-JSON-file/../someFile.json').
  then(function onSuccess(response) {
     angular.extend(_this, data);
     defer.resolve();
  }).
  catch(function onError(response) {
   console.log(response);
  });

进一步研究：CLICK HERE

无法使用Angular js从JSON文件中检索数据

2 个答案: