將JSON數據加載到HTML for循環中

Question

得到了一個JSON陣列的問題和答案，我想要添加到HTML中，我可以在數據加載罰款，問題顯示數據到每個部分。只是不能完全正確，因爲它只顯示數組中每個部分的最後一個問題和最後一個選項。

JSON數據是：

[ 
    { 
     "question": "What kind of event are you looking for", 
     "option": [ 
      "Incentive Trip", 
      "Birthday Party", 
      "Insipiring Holiday", 
      "Memorable Experience", 
      "Wedding", 
      "Conference", 
      "Exciting Concert", 
      "Crazy Festival", 
      "Product Launch", 
      "Stag Do", 
      "Hen Do", 
      "Surprise for loved ones" 
     ] 
    }, 
    { 
     "question": "What are you looking to achieve?", 
     "option": [ 
      "Bond up with your Clients", 
      "Reward the best performers", 
      "Say thank you to your team" 
     ] 
    }, 
] 

jQuery代碼是：

$.getJSON('questions.json', function(data) { 
    $.each(data, function(index, element) { 

     // Add the question 
     $.each($('section'), function() { 
      $('h2').text(element.question); 
     }); 

     $.each($('section .balloons'), function() { 
      for(var i = 0; i < $(element.option).length; i++) { 
       $('.balloons').html('<p>'+ element.option[i] +'</p>'); 
       console.log(element.option[i]); 
      }; 

     }); 


    }); 
}); 

HTML是：

<section class="play" id="eventType"> 
     <h2></h2> 
     <div class="balloons"></div> 
    </section> 
    <!-- Achieve --> 
    <section class="achieve" id="achieve"> 
     <h2></h2> 
     <div class="balloons"> 
      <div class="balloon"></div> 
     </div> 
    </section> 

Answer 1

你可以試試這個

$.getJSON('questions.json', function(data) 
{ 
    $.each($("section"), function (index){ 
     var result = data[index]; 
     var $ballons = $(this).find(".balloons"); 
     $(this).find("h2").html(result.question); 

     $.each(result.option, function(idx) { 
      $ballons.append('<p>'+ result.option[idx] +'</p>'); 
     });   
    }); 
}); 

FIDDLE DEMO HERE

Answer 2

$.getJSON('questions.json', function(data) 
{ 
    $.each(data, function(index, element) 
    { 
     $('h2').text(index.question); 
     $('.balloons').html(index.option); 

    }); 

});