jQuery - 在XML加载事件中加载json

Question

我有一个像这样的xml文件

<users>
    <user>
        <name>LOREM</name>
        <pic>LOREM</pic>
        <post>www.URL.com/info.json</post>
    </user>
    <user>
        <name>LOREM</name>
        <pic>LOREM</pic>
        <post>www.URL.com/info.json</post>
    </user>
</users>

我用jquery解析这个xml，所以：

var data = {};
$.get('xmlfile.xml', function(xml){
    var oXML = $(xml);

    oxml.find('user').each(function(i){
        data[i].name = $(this).attr('name');
        data[i].pic = $(this).attr('pic');
        data[i].post = /* i must load a json file with all posts here*/
    });

});

帖子在extern json文件中。我试图像这样

加载负载xml上的json

var data = {};
$.get('xmlfile.xml', function(xml){
    var oXML = $(xml);

    oxml.find('user').each(function(i){
        data[i].name = $(this).attr('name');
        data[i].pic = $(this).attr('pic');
        data[i].post = $.getJSON($(this).attr('post'), function(data){
            retrun data;
        });
    });

});

但它很有效。 data[i].post的值为null。你有想法在加载xml上加载json吗？

Answer 1

$.getJSON是异步的，因为AJAX是异步的。您只能在success回调中访问AJAX调用的结果。在您的示例中，您尝试将$.getJSON调用的返回值分配给data[i].post变量。但这不可能奏效，因为只有在AJAX调用成功之后，该值才能在以后使用。

所以你可以稍微颠倒你的逻辑：

$.get('xmlfile.xml', function(xml) {
    var oXML = $(xml);

    oxml.find('user').each(function(i) {
        var index = i;
        $.getJSON($(this).attr('post'), function(res) {
            data[index].name = $(this).attr('name');
            data[index].pic = $(this).attr('pic');
            data[index].post = res;
        });
    });
});

Answer 2

主要问题是getJSON是异步的

post中的data个属性为null，因为您在这里做错了两件事：

1. getJSON是异步的，因此在.each已经执行后获取您的数据
2. getJSON不会返回数据，而是返回jqXHR object

尝试以这种方式更改：

var data = []; // you likely want an array and not an object
var counter = 0;

$.get('xmlfile.xml', function(xml) {

    var oXML = $(xml);

    oxml.find('user').each(function(i) {
        var me = $(this);

        data.push({
            name: me.attr('name'),
            pic: me.attr('pic'),
            post: null
        });

        // increment counter
        counter++;

        $.getJSON(me.attr('post'), (function(index) {
            return function(data) {
                data[index].post = data;
                if (!--counter) // when it reaches ZERO
                {
                   setTimeout(function() {
                       // all JSONs have loaded now continue with your stuff
                   }, 0);
                }
            };
        })(i));
    });

});

上面的代码还会检测所有JOSN对象何时加载，以便继续处理。

但除此之外，它的工作原理如下：

1. 它获取XML
2. 收到XML时，它会遍历user元素并准备data个对象并将它们推送到数组中
3. 每个对象都会发出一个Ajax调用来获取JSON数据
4. 每次成功调用JSON然后填充正确的data对象的post属性并减少counter
5. 当计数器达到零时，另一个函数正在排队，你可以放置在加载完成后应该执行的代码。

如果您的JSON请求也可能失败，那么我建议您使用$.ajax代替getJSON，这样您也可以提供error函数，其中您还要递减{{1} }}。否则，如果只计算成功，它就不会达到零。