angular.js - How to read local json with angularjs?

Question

I read text.json and assigned it to $scope.data, but there was no response when using ng-repeat in html. How can I write the read data to the corresponding locations in the html page?
ps: When this code is run, an error occurs saying that the path to the json file cannot be found 404.
js:

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

Data in 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;
 });