从JSON中提取多个数据集

The basic set up is a simple JSON file which I am pulling into a page via ajax. Now I've got it working fine with this code

基本设置是一个简单的JSON文件，我通过ajax将它拖到页面中。现在我已经用这段代码做得很好了。

$(document).ready(function () {
            var tour = $('.js-featureTour');
            $.ajax({
                    type: "GET",
                    url: "tour.json",
                    dataTyple: "json",
                    success: function (result) {
                        var imgSrc = result.image;
                        $('.js-featureTourTitle').text(result.tourTitle);
                        $('.js-featureTourDesc').html(result.tourDesc);
                        $('.js-featureTourImg').attr('src', imgSrc);
                    }
                })
            });

This worked well with my test JSON file but what I actually have to work with is something like this

这在我的测试JSON文件中运行得很好，但实际上我需要处理的是类似的东西

{
    "tour1": {
        "tourTitle": "Test Title 1",
        "tourDesc": "description 1",
        "image": "/main1.jpg"
    },
    "tour2": {
        "tourTitle": "Test Title 2",
        "tourDesc": "description 2",
        "image": "/main2.jpg"
    },
    "tour3": {
        "tourTitle": "Test Title 3",
        "tourDesc": "description 3",
        "image": "/main3.jpg"
    }
}

What I really want is for the success stage to read what is in "tour1" insert it into the page, then wait for a bit then read what is in "tour2" and over write the "tour1" information and then do the same for "tour3". Can anyone help me out here? I've been stuck on this for longer than I care to admit. Any help is greatly appreciated.

我真正想要的是在成功阶段读取“tour1”中的内容，然后将其插入到页面中，然后稍等片刻，然后读取“tour2”中的内容，然后重写“tour1”信息，然后对“tour3”执行相同的操作。有人能帮我一下吗?我被困在这个问题上的时间比我愿意承认的要长。非常感谢您的帮助。

3 个解决方案

#1

You need to loop through the Json Object and use SetTimeout to delay the manipulation of data in DOM. Try try below code.

您需要遍历Json对象并使用SetTimeout来延迟DOM中的数据操作。试着尝试以下代码。

success: function (result) {
    $.each(results, function(i,result) {
        setInterval(function(){
          var imgSrc = result.image;
          $('.js-featureTourTitle').text(result.tourTitle);
          $('.js-featureTourDesc').html(result.tourDesc);
          $('.js-featureTourImg').attr('src', imgSrc);
        },5000)
    })
}

#2

You can do this with setInterval:

你可以用setInterval:

function handleTours(json) { //call this from the callback
    var elements = []; //build a set of elements which will help
    for (key in json) {
        elements.push(key: key, structure: json[key]);
    }
    if (elements.length > 0) { //if there are no elements, do nothing
        var index = 0;
        var intervalID = setInterval(function() { //we store intervalID to stop the repetition when we are at the end of the set
            if (index >= elements.length) {
                clearInterval(intervalID); //we are at the end of the set
            } else {
                //do something with elements[index].key and elements[index].structure
                index++;
            }
        }, 5000);
    }
}

#3

Just for the record I got it working with this

为了记录，我让它和这个一起工作

success: function (result) {
                    var time = 0;
                    $.each(result, function(i, result) {
                        setTimeout(function(){
                            var imgSrc = result.image;
                            $('.js-featureTourTitle').text(result.tourTitle);
                            $('.js-featureTourDesc').html(result.tourDesc);
                            $('.js-featureTourImg').attr('src', imgSrc);
                            },time)
                            time += 5000;
                        })
                    }

Thanks for the help!

谢谢你的帮助!

#1