Question

我写了controller.js和HTML文件，但加载时，console.log（）显示JSON文件中的对象，但数据无法在浏览器中显示。

HTML： -

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AngularJs|Http Service</title>
    <script src="angular.min.js"></script>

    <script src="controller16.js"></script>

</head>

<body ng-app="mainApp">
    <div ng-controller="people">
        <ul>
            <li ng-repeat="person in users">{{person.Name}}</li>
        </ul>
    </div>

</body>

</html>

controller.js： -

var app = angular.module('mainApp', []);
app.controller('people', function($scope, $http) {
    $http.get("http://127.0.0.1/Angularjs/12/database.json").then(function(response) {
        $scope.users = response.records;
        console.log(response);
    });
});
database.json: -{
    "records": [{
        "Name": "Alfreds Futterkiste",
        "City": "Berlin",
        "Country": "Germany"
    }, {
        "Name": "Ana Trujillo Emparedados y helados",
        "City": "México D.F.",
        "Country": "Mexico"
    }, {
        "Name": "Antonio Moreno Taquería",
        "City": "México D.F.",
        "Country": "Mexico"
    }, {
        "Name": "Around the Horn",
        "City": "London",
        "Country": "UK"
    }, {
        "Name": "B's Beverages",
        "City": "London",
        "Country": "UK"
    }, {
        "Name": "Berglunds snabbköp",
        "City": "Luleå",
        "Country": "Sweden"
    }, {
        "Name": "Blauer See Delikatessen",
        "City": "Mannheim",
        "Country": "Germany"
    }, {
        "Name": "Blondel père et fils",
        "City": "Strasbourg",
        "Country": "France"
    }, {
        "Name": "Bólido Comidas preparadas",
        "City": "Madrid",
        "Country": "Spain"
    }, {
        "Name": "Bon app'",
        "City": "Marseille",
        "Country": "France"
    }, {
        "Name": "Bottom-Dollar Marketse",
        "City": "Tsawassen",
        "Country": "Canada"
    }, {
        "Name": "Cactus Comidas para llevar",
        "City": "Buenos Aires",
        "Country": "Argentina"
    }, {
        "Name": "Centro comercial Moctezuma",
        "City": "México D.F.",
        "Country": "Mexico"
    }, {
        "Name": "Chop-suey Chinese",
        "City": "Bern",
        "Country": "Switzerland"
    }, {
        "Name": "Comércio Mineiro",
        "City": "São Paulo",
        "Country": "Brazil"
    }]
}

上面的代码只显示一个空白的屏幕。显示帮我弄清楚。

Answer 1

使用resonse.data.record代替response.record

$http.get("http://127.0.0.1/Angularjs/12/database.json").then(function(response) {
    $scope.users = response.data.records;
    console.log(response.data);
});

$ http服务不会在angularjs中的json文件中显示浏览器中的数据

1 个答案: