Question

我正在尝试使用$ http.get在控制器中获取json文件。一切顺利，直到我尝试访问持有响应的属性。如果我在$ http.get（）中尝试console.log（property），它会输出返回的对象，在$ http.get（）之外访问同一个属性，它输出undefined！我甚至尝试将它附加到$ scope并且结果相同？！

angular.module('todayfmApp')
    .controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

        var self = this;

        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });

        console.log(self.formdata);


    }]);


{
    "settings": {
        "version": "",
        "Step": "",
        "filterBreak": "",
        "pid": ""
        },
    "category": [
        { "name": "Select All", "selected": true },
        { "name": "Carlow", "value": "Carlow" },
        { "name": "Cavan", "value": "Cavan" },
        { "name": "Clare", "value": "Clare" },
        { "name": "Cork", "value": "Cork" },
        { "name": "Derry", "value": "Derry" },
        { "name": "Donegal", "value": "Donegal" },
        { "name": "Down", "value": "Down" },
        { "name": "Dublin", "value": "Dublin" },
        { "name": "Galway", "value": "Galway" },
        { "name": "Kerry", "value": "Kerry" },
        { "name": "Kildare", "value": "Kildare" },
        { "name": "Kilkenny", "value": "Kilkenny" },
        { "name": "Laois", "value": "Laois" },
        { "name": "Leitrim", "value": "Leitrim" },
        { "name": "Limerick", "value": "Limerick" },
        { "name": "Louth", "value": "Louth" },
        { "name": "Mayo", "value": "Mayo" },
        { "name": "Meath", "value": "Meath" },
        { "name": "Monaghan", "value": "Monaghan" },
        { "name": "Offaly", "value": "Offaly" },
        { "name": "Roscommon", "value": "Roscommon" },
        { "name": "Sligo", "value": "Sligo" },
        { "name": "Tipperary", "value": "Tipperary" },
        { "name": "Waterford", "value": "Waterford" },
        { "name": "Westmeath", "value": "Westmeath" },
        { "name": "Wexford", "value": "Wexford" },
        { "name": "Wicklow", "value": "Wicklow" }
    ],
    "num_nights": [
        { "name": "1 Night", "value": 1, "selected": true},
        { "name": "2 Nights", "value": 2 },
        { "name": "3 Nights", "value": 3 },
        { "name": "4 Nights", "value": 4 },
        { "name": "5 Nights", "value": 5 },
        { "name": "6 Nights", "value": 6 },
        { "name": "7 Nights", "value": 7 }
    ],
    "num_rooms": [
        { "name": "1 Room", "value": 1, "selected": true },
        { "name": "2 Rooms", "value": 2 },
        { "name": "3 Rooms", "value": 3 },
        { "name": "4 Rooms", "value": 4 }
    ],
    "num_adults": [
        { "name": "1 Adult", "value": 1 },
        { "name": "2 Adult", "value": 2, "selected": true }
    ],
    "num_child": [
        { "name": "0 Kids", "value": 0, "selected": true },
        { "name": "1 Kids", "value": 1 },


{ "name": "2 Kids", "value": 2 }
]

}

Answer 1

self.formdata = response.data.jsondatavariablename;

//使用JSON数据名称

Answer 2

在您的情况下，问题是$http.get响应数据是后期绑定方法。只有在服务调用完成后，此方法的响应才可用。这是一种异步方法，因此无法在您期望的范围内访问它。为此，您需要将响应绑定在$ scope变量中，稍后在函数调用中使用它。

首先需要调用self.getResponseData方法，比如在控制器初始化时。在调用方法self.logResponseData以记录响应数据之后。

您可能需要更改此类电话。

angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

    var self = this;
    // Get the response data with service call
    self.getResponseData = function(){
        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });
    }

    //Method to read the response data later
    self.logResponseData = function() {
        console.log(self.formdata);
    }

    //Call the method at the time controller loaded to initialize the `self` variable
    self.getResponseData();

}]);

Answer 3

$http.get()是异步的，大致意味着当你调用它时它会发送请求并且不会在此处停止代码以等待它响应，下一个语句执行仍在继续，尽管响应仍然没有到来而你没有数据。这就是为什么你需要.then()方法中的回调函数，当你得到你的响应时，它就会被调用，你可以在那里使用你的响应数据。例如，您可以将其分配给某个$scope属性，它会在您使用此属性的任何位置更新此值。

$http使用所谓的Promise来实现此目的。我试图让它变得简单，但是如果你想知道它的工作原理，请猜测它会对你有什么帮助：http://openjms.sourceforge.net/usersguide/jars.html

AngularJS变量范围

3 个答案: