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

【问题标题】：Can't able Retrieve data from JSON file using Angular js无法使用 Angular js 从 JSON 文件中检索数据
【发布时间】：2018-07-26 01:20:51
【问题描述】：

空数据正在添加到表中。

我无法使用 Angular Js 从 Json 文件中检索数据。我正在尝试使用 Angular 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>

【问题讨论】：

标签： angularjs django

【解决方案1】：

控制器

$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.min.js 没有加载
您必须将您的脚本标签放在引用 Angular 的标签之后。将其移出头部：

【解决方案2】：

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

您需要在要获取的 data 旁边传递一个 response。

【讨论】：

对不起，我还是遇到了同样的错误，比如在表中添加空 TD
@karuppasamy 向我展示您的 json 数据，您可能没有正确调用它。请更正您在<tr ng-repeat="stuednt in students"> 和下表元素中的拼写错误。
{ "breakfast_menu": { "food": [ { "name": "Belgian Waffles", "price": $5.95, "description": "我们著名的两个比利时华夫饼，有很多真正的枫糖浆”，“卡路里”：650，“isbest”：“假”}，{“名称”：“草莓比利时华夫饼”，“价格”：7.95 美元，“描述”：“轻薄的比利时华夫饼，上面覆盖着草莓和生奶油", "卡路里": 900, "isbest": "真" } ] } }
remaining things { "name": "Berry-Berry Belgian Waffles", "price": $8.95, "description": "清淡的比利时华夫饼，上面覆盖着各种新鲜浆果和生奶油", "卡路里”：900，“isbest”：“假”}，{“名称”：“法式吐司”，“价格”：4.50 美元，“描述”：“用我们自制的酵母面包制成的厚片”，“卡路里”：600 , "isbest": "true" }