无法访问AngularJS中Javascript函数返回的对象中的元素

时间:2012-12-20 19:42:38

标签: javascript arrays function object angularjs

感谢@asgoth,我可以使用AngularJS $ http服务从Yahoo中检索股票价格,如下所述:Cannot read response from AngularJS $resource JSONP get from Yahoo Finance

在“getHistoricalPrice”函数中,它将价格放在一个数组内,该数组位于一个对象内。从该函数内部,我可以访问价格并将其写入控制台。

该函数将对象返回到调用它的位置。从那里,我可以成功地将整个对象写入控制台。但是,我无法访问此对象的元素。我尝试了很多不同的方法,但仍然无法访问对象中的数据。您可以在http://jsfiddle.net/curt00/LTazR/2/或以下位置查看代码:

angular.module('app', ['ngResource']);

function AppCtrl($scope, $http, $resource) {

var historical_price = getHistoricalPrice("AAPL", 'start date is hard coded', 'end date is hard coded');
console.log("after calling historical price: ", historical_price);  // historical_price is an object and all of the correct data is outputted to console here, but I cannot access its elements directly from Javascript.

for(var key in historical_price) {
    console.log("key =",key);  // this outputs "key = list"
}

console.log("after calling getHistoricalPrice: ", historical_price.list[0][1]);  // Cannot access this as browser console gives error: TypeError: Cannot read property '1' of undefined
console.log("after calling getHistoricalPrice: ", historical_price['list'][0][1]);  // Cannot access this as browser console gives error: TypeError: Cannot read property '1' of undefined
console.log("after calling getHistoricalPrice: ", historical_price[0][1]);  // Cannot access this as browser console gives error: TypeError: Cannot read property '1' of undefined


function getHistoricalPrice(symbol, start, end) {

    var query = 'select * from csv where url=\'http://ichart.yahoo.com/table.csv?s=' + symbol + '&a=' + '11' + '&b=' + '19' + '&c=' + '2012' + '&d=' + '11' + '&e=' + '19' + '&f=' + '2012' + '&g=d&ignore=.csv\'';


    var url = 'http://query.yahooapis.com/v1/public/yql?q=' + fixedEncodeURIComponent(query) + '&format=json&callback=JSON_CALLBACK';

    var histData = {};

    $http.jsonp(url, {timeout: 30000}).success(function(json) {
        var list = [];


        var result = json.query.results.row;

        result.shift(); // remove the header (columns) row
        angular.forEach(result, function(row) {
            list.push([(new Date(row.col0)).getTime()/1000, parseFloat(row.col4)]);

        });
        list.sort(function(val1, val2) {
            return val1[0] - val2[0];
        });
        histData.list = list;
        console.log('Loaded historical data',histData.list[0][1],', for ' + symbol);  // This works and gives the price
    });

    return histData;
}

var fixedEncodeURIComponent = function(str) {
    return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
};



}


任何有关解决此问题的帮助或建议都非常感谢!

4 个答案:

答案 0 :(得分:1)

这是时间问题。

在第12-14行中,您尝试在填充之前访问histData.list。这是因为此代码在执行$ http.jsonp函数的成功回调之前运行。

任何依赖于完成回调的代码都必须在回调中或回调中调用的函数中。

答案 1 :(得分:1)

请参阅https://stackoverflow.com/a/13967709/1916258

上的答案

调试Yahoo api的一个好方法是使用YQL控制台:http://developer.yahoo.com/yql/console/

有关不同职位(股票信息)的信息可在http://www.gummy-stuff.org/Yahoo-data.htm

上找到

编辑:函数fixedEncodeURIComponent仍然存在问题。它也应编码引号(“):

var fixedEncodeURIComponent = function(str) {
    return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A").replace(/\"/g, "%22");
};

答案 2 :(得分:1)

鲍勃是对的,你没有正确计时。你也在调用之后声明了fixedEncodeURIComponent。当我加载jsfiddle时,这会立即导致错误。

当你正确地将回调传递给你的函数时,你实际上并没有调用它。我删除了json的所有后期处理,因为你有一些涉及查询的其他错误,只是实现了回调,所以你可以看到它正常工作。

请求完成后,您仍然在成功功能中,需要添加

if(typeof(callback) === "function"){
    callback();
}

这会调用您传入的函数并运行它。这是一个有效的jsFiddle: http://jsfiddle.net/LTazR/22/

我还更新了一个我创建了调用输出的新变量,因此您可以看到它正在发生变化。

答案 3 :(得分:0)

感谢大家提供建议。

我通过使用AngularJS'$ scope变量解决了这个问题,例如$ scope.symbol [user] .price。我在调用getHistoricalPrice函数之前创建了这个变量,然后在该函数中,在从$ http.jsonp返回结果之后,我将值放入$ scope变量中,如下所示:

$scope.symbol[user].price = row.col4;