javascript - 对象长度为0，但其中有多个项目

我正在创建一个对象(dataObj)，该对象在$ getJSON内返回其中的多个项目:

var cities = ['london', 'paris', 'munich', 'geneva', 'prague', 'vienna', 'barcelona', 'istanbul'],
    totalCities = cities.length,
    i = 0,
    $container = $('#cities'),
    htmlFragment,
    data,
    obj,
    dataObj = {
        cities:[]
    };

function appendData() {

    var city = cities[i],
        locationQuery = escape("select item from weather.forecast where woeid in (select woeid from geo.places where text='" + city + "') and u='c'"),
        locationUrl = "https://query.yahooapis.com/v1/public/yql?q=" + locationQuery + "&format=json&callback=?";

    if ( i === cities.length ) { return };

    $.getJSON( locationUrl, function( data ) {
        var condition = data.query.results.channel[0].item.condition.text,
            temperature = data.query.results.channel[0].item.condition.temp;

        obj = {
            city: city,
            condition: condition,
            temperature: temperature
        };

            dataObj.cities.push(obj);

        // $container.append(html);

        appendData();

    });

    i = i + 1;
}

appendData();

var source   = $("#some-template").html();
var template = Handlebars.compile(source);

var dataObjExample = { cities: [
        {city: "london", condition: "Cloudy", temperature: "8" },
        {city: "paris", condition: "sunny", temperature: "5" },
        {city: "munich", condition: "Rainy", temperature: "3" }
    ]};

console.log(dataObj);
console.log('dataObj:' + dataObj.cities.length);

console.log(dataObjExample);
console.log('dataObjExample:' + dataObjExample.cities.length);

$("#content-placeholder").html(template( dataObj ));

当我console.log dataObj.cities时，一切看起来都很好，并且有很多项目，但是长度为0，我确定这是问题的根源。我一直在摆弄并寻找一些时间来寻找解决方案，但无济于事。有什么想法聪明的人吗？

更新

抱歉，昨晚我处于精神错乱的状态，我想写:dataObj.cities。

我在JS中添加了2 console.logs。一个是真实数据，将dataObj.cities.length的长度显示为0。另一个是手动创建对象的地方，并正确显示dataObjExample.cities.length为3。

请通过以下网址查看控制台:https://dl.dropboxusercontent.com/u/36374911/weather%20app/index.html

提前致谢!

最佳答案

“appendData”函数是递归函数，其作用与for循环不同。

当i === city.length时，调用另一个函数，该函数将访问您已完成的数组。

$(document).ready(function(){

var cities = ['london', 'paris', 'munich', 'geneva', 'prague', 'vienna', 'barcelona', 'istanbul'],
    totalCities = cities.length,
    i = 0,
    $container = $('#cities'),
    htmlFragment,
    data,
    obj,
    dataObj = {
        cities:[]
    };

function appendData() {

    var city = cities[i],
        locationQuery = escape("select item from weather.forecast where woeid in (select woeid from geo.places where text='" + city + "') and u='c'"),
        locationUrl = "https://query.yahooapis.com/v1/public/yql?q=" + locationQuery + "&format=json&callback=?";

    if ( i === cities.length ) {
        buildTemplate();
        return;
    };

    $.getJSON( locationUrl, function( data ) {
        var condition = data.query.results.channel[0].item.condition.text,
            temperature = data.query.results.channel[0].item.condition.temp;

        obj = {
            city: city,
            condition: condition,
            temperature: temperature
        };

        dataObj.cities.push(obj);

        appendData();
    });

    i = i + 1;
}

function buildTemplate() {
    var source   = $("#some-template").html();
    var template = Handlebars.compile(source);

    var dataObjExample = { cities: [
            {city: "london", condition: "Cloudy", temperature: "8" },
            {city: "paris", condition: "sunny", temperature: "5" },
            {city: "munich", condition: "Rainy", temperature: "3" }
        ]};

    console.log(dataObj);
    console.log('dataObj:' + dataObj.cities.length);

    console.log(dataObjExample);
    console.log('dataObjExample:' + dataObjExample.cities.length);

    $("#content-placeholder").html(template( dataObj ));
}

appendData();

});

关于javascript - 对象长度为0，但其中有多个项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21321226/