从angularJS中的JSON获取数据

时间:2019-02-08 07:05:28

标签: angularjs json angularjs-scope

我是AngularJS的初学者,试图从.json文件中获取数据,但是我没有在前端获取它……任何人都可以告诉我如何在客户端找到它。虽然我读了this answer,但找不到所需的结果。

records.json

[
  {
    "firstName": "Dawn",
    "lastName" : "Cassidy",
    "gender"   : "Female",
    "salary"   : 35000
  },
  {
    "firstName": "Paul",
    "lastName": "Hastings",
    "gender": "Male",
    "salary": 325000
  },
  {
    "firstName": "steve",
    "lastName": "payne",
    "gender": "Male",
    "salary": 30000
  },
  {
    "firstName": "Tina",
    "lastName": "Duggan",
    "gender": "Female",
    "salary": 35000
  }
]

Script.js

app.controller("dataController", function ($scope, $http) {
    var url = "data/records.josn";
    $http.get(url).success(function (response) {
        $scope.employees = response;
    });
});

FirstPage.cshtml

<div ng-controller="dataController">
           <table style="width:500px; border:2px solid black;">
                <thead>
                    <tr style="text-align:left">
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees | orderBy: '-salary'">
                        <td>{{ employee.firstName | uppercase }}</td>
                        <td>{{ employee.lastName | lowercase }}</td>
                        <td>{{ employee.gender }}</td>
                        <td>{{ employee.salary | currency: "$" }}</td>
                    </tr>
                </tbody>
            </table>
</div>

1 个答案:

答案 0 :(得分:0)

代码中的语法错误使用“ josn”而不是“ json”。

app.controller("dataController", function ($scope, $http) {
    var url = "data/records.json";
    $http.get(url).success(function (response) {
        $scope.employees = response;
    });
});