Question

空数据正在表中添加。

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

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(data) {
            $scope.students = data;
        });
    }
});

<!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 = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'waste/angular.min.js'%}"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{% static '/bootstrap/js/app_ang.js'%}"></script>

        <div class="col-sm-12" ng-controller="tablejsonCtrl">
             <button class="clickbutton" value="10" 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="stuednt in students">
                    <td>{{stuednt.name}}</td>
                    <td>{{stuednt.price}}</td>
                    <td>{{stuednt.description}}</td>
                    <td>{{stuednt.calories}}</td>
                    <td>{{stuednt.isbest}}</td>
                </tr>
             </table>
        </div>

        
  </body>
</html>

Answer 1

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

您需要在response旁边传递data。

Answer 2

控制器

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

html

<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>

json价格和卡路里值应采用双引号

{
    "breakfast_menu":
    {
        "food": [
        {
            "name": "Belgian Waffles",
            "price": "$5 .95",
            "description": "Two of our famous Belgian Waffles with plenty of real maple syrup",
            "calories": "650",
            "isbest": "false"
        },
        {
            "name": "Strawberry Belgian Waffles",
            "price": "$7 .95",
            "description": "Light Belgian waffles covered with strawberries and whipped cream",
            "calories": "900",
            "isbest": "true"
        }]
    }
}

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

2 个答案: