Append multiple objects within an Array with jQuery

Question

I am student learning jQuery and my goal is to append each object within an array to 4 different buttons using the 4 objects within the indexes of optionArray. Currently it appends just a single button of the index i of the optionArray like this: Radio Head, Gorillaz, Coldplay, Arctic Monkeys.

I would like it to append each object individually within index i of optionsArray as 4 different buttons. For example:

Radio Head
Gorillaz
Coldplay
Arctic Monkeys

I am unsure how to do this...thank you for any help in advanced.

JS:

window.onload = function() {
    $('#start').html('<div class="text-center"><button type="button" class="btn btn-default">Start</button></div>');
};

var questionArray = ["This bands second album went platinum 5 times in the UK and double Platinum in the US."];
var optionArray = [["Radio Head", "Gorillaz", "Coldplay", "Arctic Monkeys"], []];
var answerArray= ["Gorillaz"];
var imageArray= ["http://cdn3.pitchfork.com/artists/1767/m.65d9c64d.jpg", "http://crowningmusic.com/storage/rA7GUFFoBCtT8Jg4L1tv.png", "", "", ""];

var count = 0;

$("#start").on('click', function() {
    $(this).css("display","none");
    for (var i = 0; i < questionArray.length; i++) {
        $("#question").html(questionArray[i]);
        for (var j = 0; j < 4; j++) {
            $("#options").append("<button>" + optionArray[i] + "</button>");
        }
    }   
    // $("#holder").html("<img src=" + questionArray[count] + ">");
});

Your goal is hard to understand "I would like it to append each index within index i as 4 different buttons." — KAngel7
– KAngel7, Commented May 22, 2017 at 4:43

karthick · Accepted Answer · 2017-05-22 04:43:52Z

3

You are using a 2 dimensional array for options. Change your for loop iteration of options to this

    for (var j = 0; j < 4; j++) {
       $("#options").append("<button>" + optionArray[i][j] + "</button>");
    }

answered May 22, 2017 at 4:43

karthick

12.2k7 gold badges61 silver badges93 bronze badges

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

1 Comment

willking Over a year ago

brilliant, thank you! this is exactly what I was hoping for.

Collectives™ on Stack Overflow

Append multiple objects within an Array with jQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related