我从JSON文件中获取数据并在我的视图中显示列表（directory.php）。但是它显示了一些错误：order：notArray

Question

  

如果我通过定义一个数组来做它，它一切正常。但是   只有在我尝试获取JSON数据时才会出现问题。

下面是我的文件directory.php的代码，我稍后在使用路由的主索引文件中包含ng-view：

  

按名称排序         按腰带订购

<div class="content">
    <button ng-click = "order = 'name' " >Order By Name</button>
    <button ng-click = "order = 'belt' " >Order By Belt</button>
    <input type="text" ng-model = "search" placeholder="Search for a ninja here...">
    <ul>
        <li ng-repeat = "ninja in ninjas |orderBy: order | filter: search" ng-show = "ninja.available">
            <img ng-src = "{{ ninja.thumb }}" style="margin: -12px 10px 0 0; float: left; width: 55px" ng-show = "ninja.thumb" />
            <h3>{{ ninja.name }} - {{ ninja.rate | currency}}</h3>
            <div class="remove"  ng-click = "removeNinja(ninja)">×</div>
            <span class="belt" style="background: {{ ninja.belt  }}">{{ ninja.belt }} belt</span>   <hr><hr>        
        </li>
    </ul>
    <form ng-submit = "addNinja()">
        <input type="text" placeholder="Enter ninja name here..." ng-model = "newninja.name">
        <input type="text" placeholder="Enter ninja belt here..." ng-model = "newninja.belt">
        <input type="text" placeholder="Enter ninja rate here..." ng-model = "newninja.rate">
        <input type="submit" value="Add Ninja">
    </form>
</div>

在模块中，我正在使用此代码。最后一节使用$ http.get（）...是关注点：

let myModule = angular.module('myModule',['ngRoute']);

myModule.config(['$routeProvider', function($routeProvider) {

    $routeProvider
        .when('/home',{
            templateUrl:'views/home.php'
        })
        .when('/directory',{
            templateUrl:'views/directory.php',
            controller:'MyController'
        }).otherwise({
            redirectTo:'/home'
        });

}]);

myModule.controller('MyController',['$scope','$http',function($scope,$http) {

    $scope.addNinja = function() {

        $scope.ninjas.push({

            name: $scope.newninja.name,
            belt: $scope.newninja.belt,
            rate: parseInt($scope.newninja.rate),
            available: true
        });

        $scope.ninja.name = "";
        $scope.ninja.belt = "";
        $scope.ninja.rate = "";

    }

    $scope.message = "Here is the list of some ninjas below";

    $scope.removeNinja = function(ninja) {

        let removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja,1);
    }


    $http.get('data/ninjas.json')
        .then(function(data) {
                $scope.ninjas = data;
        },
        function(error) {
            console.log(error);
            }
        );

}]);

以下是包含数据的JSON文件：

[
    {
    "name": "Yoshi",
    "belt": "green",
    "rate": 50,
    "available": true,
    "thumb": "content/img/Yoshi.png"
    },

    {
    "name": "Lee",
    "belt": "black",
    "rate": 100,
    "available": true,
    "thumb": "content/img/Lee.png"
    },

    {
    "name": "Law",
    "belt": "yellow",
    "rate": 1000,
    "available": true,
    "thumb": "content/img/Law.png"
    },

    {
    "name": "Jin",
    "belt": "orange",
    "rate": 300,
    "available": false,
    "thumb": "content/img/Jin.png"
    }

]

Answer 1

如果您收到JSON对象，则必须通过angular.fromJson（）方法

将其转换为Object

以这种方式尝试

$http.get('data/ninjas.json')
        .then(function(data) {
                $scope.ninjas = angular.fromJson(data);
        },
        function(error) {
            console.log(error);
            }
        );