Question

问题

我正在试图弄清楚如何使用jQuery从JSON文件中返回HTML。

我似乎已经returnLocations()等待getLocations()完成，以便使用从我的locationsBody循环收集的信息最终确定变量.each。麻烦（我认为）是我无法返回该变量将其输出到我的HTML页面。

问题

如何返回变量locationsBody？

注意

（以下代码中可能存在错误，因为我尽可能地将其修剪下来，但我认为它应该用或不用它们来说明问题）

jQuery

全局变量

var locationsFull = 'un d fined';
var locationsOpener = '' +
    '<div class="locations-header">places youve been</div>' +
    '<div class="locations-container">' +
        '<div class="locations-nav left">left</div>' +
        '<div class="locations-nav right">right</div>'
;
var locationsBody = '<div class="locations-inner">'; // opening of container
var locationsCloser = '</div>'; // closing of container

功能

function locationsFunction() {
    function getLocations() {
        var wait = $.Deferred();
        var area = 'Area1';
        var counter = 1;
        $.getJSON("locations.json", function(data) {
            $(data.places).each(function() {
                var location = this.location;
                var image = this.image;
                if (this.area === 'Area1') {
                    if (counter == 2) {
                        locationsBody = locationsBody + 
                            '<div class="locations-places">' +
                                '<img src="images/places/' + image + '">' +
                                '<div class="locations-places-image">' + location + '</div>' +
                            '</div></div>'
                        ;
                        counter = 0; // added closing of container, reset to 0
                    } else {
                        locationsBody = locationsBody + 
                            '<div class="locations-places">' +
                                '<img src="images/places/' + image + '">' +
                                '<div class="locations-places-image">' + location + '</div>' +
                            '</div>'
                        ;
                        counter = counter + 1;
                    }
                }
            })
            wait.resolve();
        })
        return wait;
    }
    function returnLocations() {
        locationsFull = locationsOpener + locationsBody + locationsCloser; // works, proven in alert and console.log
        //alert(locationsFull); // works
        console.log(locationsFull); // works
        //return locationsFull; // doesnt work
        //return 'anything'; // doesnt work
    }
    getLocations().then(returnLocations);
}

电话

$(function() {
    $('.locations-body').html(locationsFunction());
})

JSON文件

{"places":[
    {
        "area": "Area1",
        "location": "Downtown",
        "image": "downtown.jpg"
    },
    {
        "area": "Area1",
        "location": "Uptown",
        "image": "uptown.jpg"
    }
]}

HTML

<div class="locations-body"></div>

进一步注意：类似于此问题已经在stackoverflow上被问了几十次，这些问题和答案有数十万次读取。在过去的两天里，我已经阅读了所有最重要的内容。我的问题是我无法彻底理解答案并将其应用于我的确切情况，因为似乎是数十（数百/数千？）人提出这些问题以及数十万（数百万？）人的问题。一直在寻找异步问题的解决方案。

Answer 1

如果可行的话，你可以在.html()函数内调用returnLocations()。

功能

function returnLocations() {
    locationsFull = locationsOpener + locationsBody + locationsCloser;
    $('.locations-body').html(locationsFull);
}

电话

$(function() {
    locationsFunction();
}

否则，您需要查看回调read this，如果您需要这样做，我可以稍后通过示例更新我的回答。

Answer 2

你试过吗

return wait.promise();

而不是返回延期？然后这样打电话：

var deferredChain = $.Deferred();
deferredChain.then(getLocations).then(returnLocations);
deferredChain.resolve();

Answer 3

我今天发现只需在.done末尾添加$.getJSON似乎工作方式相同，并且比使用$.Deferred和相关的代码行更容易实现工作

function locationsFunction() {
    var area = 'Area1';
    var counter = 1;
    $.getJSON("locations.json", function(data) {
        $(data.places).each(function() {
            var location = this.location;
            var image = this.image;
            if (this.area === 'Area1') {
                if (counter == 2) {
                    locationsBody = locationsBody + 
                        '<div class="locations-places">' +
                            '<img src="images/places/' + image + '">' +
                            '<div class="locations-places-image">' + location + '</div>' +
                        '</div></div>'
                    ;
                    counter = 0; // added closing of container, reset to 0
                } else {
                    locationsBody = locationsBody + 
                        '<div class="locations-places">' +
                            '<img src="images/places/' + image + '">' +
                            '<div class="locations-places-image">' + location + '</div>' +
                        '</div>'
                    ;
                    counter = counter + 1;
                }
            }
        })
    }).done(function() {
        locationsFull = locationsOpener + locationsBody + locationsCloser;
        $('.locations-body').html(locationsFull);
    });
}

如何使用.getjson和.each

3 个答案: