Access Marvel API Names

Question

I am trying to create a function that will allow me to click through the marvel names at random. However, I have tried to implement the following code but it only shows the one name and does not allow me to click through the different names. Help please.

 var arr = data.data.results[1].name;
      
      console.log(arr)


      function nextItem() {
        for (i = 0; i <arr.length; i++){
          i = i + 1;
          i = i % arr; 
      
      }   return arr}

      function prevItem () {
        if (i===0) {
          i = name;
        }
        i = i - 1;
        return name[i]
      }
      

      
        document.getElementById('character-name').textContent = arr;
        document.getElementById("next-btn").addEventListener('click', function (e){
        document.getElementById("character-name").textContent= nextItem();
      }

        )        });

I have added a picture of the MARVEL API properties and associated values of an object Marvel API Console.log

score 0 · Accepted Answer · answered Jul 03 '20 at 22:10

Most important you have to extract all names form the array. You are currently only selecting the name of the element 1.

var arr = data.data.results[1].name;

This should be change to

var arr = data.data.results.map(_ => _.name);
// creates an array with only the names of the marvel heros

I would random shuffle the array of name first using the algo from here: https://stackoverflow.com/a/2450976/13050816

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

for your example I would make it like this:

var arr = data.data.results.map(_ => _.name);
shuffle(arr)

let index = 0;

function nextItem() {
   index++;
   index % arr.length;
   return arr[index];
}
function prevItem() {
   index--;
   if(index < 0) index = arr.length - 1;
   return arr[index];
}

document.getElementById('character-name').textContent = arr[index];
document.getElementById("next-btn").addEventListener('click', function (e){
    document.getElementById("character-name").textContent= nextItem();
)});

Thanks for your help but in the console it says "app.js:11 Uncaught (in promise) ReferenceError: shuffle is not defined".. Help please? — SamM, Jul 07 '20 at 21:18
Hi @Jannis Schönleber I have found a way to shuffle, thanks for your help `var arr = data.data.results.map(_=> _.name); const shuffledQuestions = arr.sort(() => Math.random() - .5)` — SamM, Jul 07 '20 at 22:31
That looks good. I haven't fully tested it back then :-) But I am glad it worked — Jannis Schönleber, Jul 16 '20 at 12:17

Access Marvel API Names

1 Answers1