对象长度为0,但其中有几个项目

Question

我正在创建一个对象(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 ));

当我调试data.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

提前致谢!

Answer 1

“appendData”函数是一个递归函数，其工作方式与 for 循环不同。

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

$(文档).ready(函数(){

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();

});