Load in JSON-Daten in HTML für Schleife

Question

Haben Sie ein JSON-Array von Fragen und Antworten, die ich in HTML hinzufügen möchte, kann ich in die Daten fein laden, Problem zeigt die Daten in den jeweiligen Abschnitt. Kann es einfach nicht richtig machen, da es nur die letzte Frage und die letzte Option im Array für jeden Abschnitt zeigt.

JSON-Daten ist:

[ 
    { 
     "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-Code ist:

$.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 ist:

<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

Sie können versuchen, diese

$.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); 

    }); 

});