Load in JSON data into html for loop

Question

Got a JSON array of questions and answers that I want to add into HTML, I can load in the data fine, problem is showing the data into each respective section. Just can't quite get it right as it's only showing the last question and the last option in the array for each section.

JSON data is:

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

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

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

Mahedi Sabuj · Accepted Answer · 2016-05-22 11:03:11Z

2

You can Try this

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

edited May 22, 2016 at 11:03

answered May 22, 2016 at 10:57

Mahedi Sabuj

2,9543 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Warve Over a year ago

I get the following error: Uncaught TypeError: Cannot read property 'question' of undefined

Mahedi Sabuj Over a year ago

Try to console.log both data & result. do they shown you as undefined?

Warve Over a year ago

I get the data, however I also get an undefined after. I have more sections defined in the HTML, could the JS be looking to populate those?

Warve Over a year ago

Yes it was, renaming all other sections to divs causes it to work. Thanks!!

Sarjerao Ghadage · Accepted Answer · 2016-05-22 10:42:30Z

0

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

    });

});

answered May 22, 2016 at 10:42

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

1 Comment

Warve Over a year ago

Still only pulling in the last question and last options from the array :(

Collectives™ on Stack Overflow

Load in JSON data into html for loop

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related