0

PROBLEMA Estoy intentando consumir primero un web service que me retorne una serie de datos, esos datos los quiero visualizar por medio de canvas. Lo que pretendo es realizar estadísticas con los datos consumidos y visualizarlo en una gráfica de barras creado con canvas.

Lo que tengo es lo siguiente:

HMTL:

<div id="app">
  <canvas id="canvas" width="800" height="600"></canvas>
</div>

En el controlador de laravel, tengo esto siguiente que son datos ficticios para las pruebas:

public function index(Request $request){
  return Response()->json([
     ['id'=>1,'name'=>'Jose'],
     ['id'=>2,'name'=>'Antonio'],
     ['id'=>3,'name'=>'Esteban'],
  ]);

}

En este caso para visualizar el dibujo de canvas lo estoy haciendo por medio de vue para consumir el web service, de esta manera:

var v = new Vue({
  el: '#app',
  data: {
    datos:[]
  },
  created: function(){
     axios.get('/mis-datos-empleado').then((response)=>{
          this.datos = response.data;
         });
  },
  methods: {
    updateCanvas: function (){
      var canvas = document.getElementById('canvas'),
      var ctx = canvas.getContext('2d');
      // de momento quiero visualizar los registros del arreglo de una 
      //posicion del arreglo de esta manera  
      ctx.fillStyle = "black";
      ctx.font="20px Georgia";
      ctx.fillText(this.datos[1].name,10,50);
    }
  },
  mounted: function (){
    this.updateCanvas();
  }
});

El problema surge en esta linea del código

ctx.fillText(this.datos[1].name,10,50);

Ya que me manda un error en la consola que visualizo en chrome que es lo siguiente:

app.js:11446 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'name' of undefined"

(found in <Root>)

Entiendo bien que esto pasa porque el tiempo de respuesta al consumir no hay nada, entonces lo que quiero es primero consumir el web service y luego visualice los datos en canvas, el método funciona si remplazo esto:this.datos[1].name por una cadena de texto, pero hacerlo como quiero manda error. Alguien sabrá como solucionar este tipo de problemas?

2

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.