angular.js - 如何用angularjs读取本地json？

Question

我读取了text.json，并且赋值到$scope.data里了,在html中用ng-repeat没有反应。请问怎么样才能让读取出来的数据分别写到html页面里对应的位置去？
ps:这段代码运行时报错说，找不到json文件的路径404.
js:

 function dataController($http,$scope) {
 $http.get("json/text.json").success(function(freetrial) { alert(freetrial);$scope.data = freetrial;});

json里的数据:

{"freetrial":[{
"id": "01",
"imgurl": "images/1.jpg",
"status": "0"
},
{
"id": "02",
"imgurl": "images/2.jpg",
"status": "1"
}
]}

html:

<p ng-controller="dataController" ng-repeat="x in data|filter:{status:'0'}">
<p id="{{x.id}}">
<img ng-src="{{x.imgurl}}" />
</p>
</p>

Answer 1

Since it has prompted 404, which means not foundjson, it should be the wrong path

And your success()方法里面的freetrial actually represents all the data of json, so when you want to get the array later, you won’t be able to get it this way.

should be taken like this:

 function dataController($http,$scope) {
     $http.get("json/text.json").success(function(data) {
         $scope.data = data.freetrial;
     });
 }

Answer 2

You can configure the absolute path first, and then change to the relative path if it succeeds and there are no other problems.

Answer 3

You can configure the absolute path first, and then change to the relative path if it succeeds and there are no other problems.

Answer 4

Have you taken it out?
I haven’t been able to take it out

Answer 5

If it is a 404 error, it means that the json data of get has not been obtained, that is, there is a problem with the json path. I copied your code and tried it. If the path is correct, the data will not be displayed on the page.
But:

function dataController($http,$scope) {
$http.get("json/text.json").success(function(freetrial) {   
        alert(freetrial);
        $scope.data = freetrial;
        console.log($scope.data);//可以打印出数据
    });
};

The correct get method should be:

function dataController($http, $scope) {
    $http.get("rightUrl").success(function(data) {
        $scope.data = data.freetrial;
    });
};

The role of data: refer to angular.js source code

 $http.get('test_data.json', 
     {cache: $templateCache}).success(function(userComments){
       self.userComments = userComments;
 });