Случайный массив объектов

Question

Итак, у меня есть этот массив:

var musicQuiz = [
  {
    lyrics: "Now the drugs don´t work",
    answers: [
      "The Verve",
      "Oasis",
      "Adele",
      "Rolling Stones",
      "Chris de Burgh",
      "Ceasars"
    ]
  },
  {
    lyrics: "Go your own way",
    answers: [
      "The Chemical Brothers",
      "U2",
      "The Doors",
      "Fleetwood Mac",
      "Moloko",
      "The Beatles"
    ]
  }
];

Я хочу показать "текст песни" в случайном порядке. У меня есть это:

for (var i = 0; i < musicQuiz.length; i++) {
  var question = document.getElementById("question");
  var random = Math.floor(Math.random() * musicQuiz[i].lyrics.length);
  question.textContent = musicQuiz[i].lyrics[random];
}

Но он не работает, он показывает толькописьмо.Я видел, как это сделать с массивом, но не могу понять, как это сделать.Любая помощь и объяснение было бы хорошо.

Answer 1

Разделить ваши тексты в массив

    for (var i = 0; i < musicQuiz.length; i++) 
        {
           var question = document.getElementById("question");
           var lyricsArray = musicQuiz[i].lyrics.split(" ");
           var random = Math.floor(Math.random() * lyricsArray.length);
           question.textContent = lyricsArray[random];
        }

Answer 2

Сначала перемешайте массив (вы также можете перемешать ответы).Затем перечислите это, как вы, вставляя перемешанные элементы в дом ...

let quiz = [
  { lyrics: 'hey jude, whats up with you?',
    answers: [ 'ac/dc', 'the beatles', 'queen' ]
  },
  { lyrics: 'walk like an egyption',
    answers: [ 'guns and roses', 'the bengals', 'bee gees' ]
  },
  { lyrics: 'heard it from a friend who, heard it from a friend who',
    answers: [ 'led zepplin', 'reo speedwagon', 'the eagles' ]
  },
];

let shuffledQuiz = _.shuffle(quiz);
shuffledQuiz.forEach(quizElement => {
      console.log(quizElement.lyrics);
      // insert into your dom here
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Answer 3

Вы просматриваете текст и берете случайный символ из каждого из них и устанавливаете его в DOM, так что в конце страница будет содержать случайный символ из последнего текста.Вы хотите взять случайную лирику вместо:

 var question = document.getElementById("question");
 var random = Math.floor(Math.random() * musicQuiz.length);
 question.textContent = musicQuiz[random].lyrics;