JSONから複数のデータセットを引き出す

Question

基本的な設定は、JSONファイルで、これはajax経由でページに取り込みます。私は本当に何をしたいです。この

{ 
    "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" 
    } 
} 

ような何か今、私はそれがこのコード

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

これは私のテストJSONファイルとよく働いたと細かい作業が、私は実際に仕事をしなければならないものを持っています"tour1"にあるものをページに挿入し、少し待ってから "tour2"にあるものを読み、 "tour1"情報を書き込んでから、 "tour3"のために同じことをします。誰でもここで私を助けることができますか？私はこれについて、私が認めようとするよりもずっと長く立ち往生してきた。どんな助けでも大歓迎です。

Answer 1

DOM内のデータ操作を遅らせるには、Jsonオブジェクトをループし、SetTimeoutを使用する必要があります。以下のコードを試してみてください。

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) 
    }) 
} 

Answer 2

あなたは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); 
    } 
} 

Answer 3

を私はそれが助けのために、この

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

おかげで作業しました！