jQuery Script: I Populate An Array But Can't Access It From Outside

Question

I'm starting to fiddle with jquery and I'm going kind of crazy... I am making a little script to fetch football players from a fantasy football website. I have the following html and JS to work with:

  <table class="table table-striped">
  <thead>
    <tr>
      <th>Jugador</th>
      <th>Equipo</th>
      <th>Puntos</th>
    </tr>
  </thead>
  <tbody>
    <tr class="jugador">
      <td>Sergio-Ramos</td>
      <td>Real Madrid</td>
      <td></td>
    </tr>
    <tr class="jugador">
      <td>Messi</td>
      <td>F.C. Barcelona</td>
      <td></td>
    </tr>
    <tr class="jugador">
      <td>Morales</td>
      <td>Levante</td>
      <td></td>
    </tr>
    <tr class="jugador">
      <td>Bale</td>
      <td>Real Madrid</td>
      <td></td>
    </tr>
  </tbody>
</table>

And the following JS:

<script>
  var puntos_jugador = [];

  $(".jugador").each(function(index) {

    var nombre = $(this).find("td").eq(0).text();

    puntos_jugador = puntosJugador(nombre);

    console.log(nombre);
    console.log(puntos_jugador);

    $(this).find("td").eq(2).text("Hola");
  });

  function puntosJugador(nombre) {
    var puntos = [];

    $.get('https://www.comuniazo.com/comunio/jugadores/' + nombre, function(response) {

      $(response).find('.tr-points, .tr-status').each(function(fila) {
        //var jornada = $(this).find("td").eq(0).text();
        var puntos_jornada = $(this).find(".bar").text();
        puntos.push(puntos_jornada);
        //console.log('Jornada ' + jornada + ' ' + puntos);
      });
    });

    return puntos;
  }
</script>

The thing is the console.log(puntos_jugador) does return an array filled with the information:

However I cannot access puntos_jugador[0] or try puntos_jugador.toString() .

Could anyone tell me what am I doing wrong (maybe everything) or give me some orientation on how to fix this?

Thanks on beforehand and sorry for my low JS level, I'm working on it.

Answer 1

The problem in your code is that you are doing an asynchronous call with $.get and then you return the result directly without waiting for the response, which will always be the empty array define above.
You should wait for the response and then call a callback (or use promises)

Something like this:

  var puntos_jugador = [];

  $(".jugador").each(function(index) {

    var nombre = $(this).find("td").eq(0).text();

    puntosJugador(nombre, function(result) {
        console.log('done'); 
        puntos_jugador = result;
        console.log(nombre);
        console.log(puntos_jugador);
    });

    $(this).find("td").eq(2).text("Hola");
  });

  // <---- HERE pass a callback and then call it when you have all results.
  function puntosJugador(nombre, cb) {
    var puntos = [];
    $.get('https://www.comuniazo.com/comunio/jugadores/' + nombre, function(response) {
       console.log('response ',response)
      $(response).find('.tr-points, .tr-status').each(function(fila) {
        //var jornada = $(this).find("td").eq(0).text();
        var puntos_jornada = $(this).find(".bar").text();
        puntos.push(puntos_jornada);
        //console.log('Jornada ' + jornada + ' ' + puntos);
        console.log('here', puntos);
      });
      cb(puntos);
    });
  } 

Answer 2

Refactor your method to this:

function puntosJugador(nombre) {
    var puntos = [];

    $.get('https://www.comuniazo.com/comunio/jugadores/' + nombre, function(response) {

      $(response).find('.tr-points, .tr-status').each(function(fila) {
        //var jornada = $(this).find("td").eq(0).text();
        var puntos_jornada = $(this).find(".bar").text();
        puntos.push(puntos_jornada);
        //console.log('Jornada ' + jornada + ' ' + puntos);
      });
      return puntos;
    });


  }