Как получить данные через API ВКонтакте и вывести их в canvas?

Question

[Ирина Соколовская]

Добрый день. Я хочу получить через API ВКонтакте количество подписчиков в каждой из нескольких групп и вывести их в виде столбчатой диаграммы в canvas. Код того, что я сделала, здесь.

С тестовыми данными диаграмма в canvas выводится. Если пишу в консоли getMembers(1) то данные по количеству подписчиков в консоли выводятся.

Почему-то результат вывода getMembers(1) не присваивается переменной и не выводится на график. В чем может быть проблема?

Answer 1

[Ivanq]

Код

window.onload = function() {
  // init chart
  initChart();
};

// VK app
VK.init({
  apiId: 5225204
});

function getMembers(gid, callback) {
  VK.Api.call('groups.getById', {group_id: gid, fields: 'members_count'}, function(data){
    if(data.response) {
      console.log('success');
      console.log(data.response[0].members_count);
      callback(data.response[0].members_count);
    } else {
      console.log('error');
    }
  });
}

// get groups members
getMembers('group1', function(gr1) {
  getMembers('group2', function(gr2) {
    getMembers('group3', function(gr3) {
      getMembers('group4', function(gr4) {
        // draw chart
        var chartData = [gr1, gr2, gr3, gr4];
      });
    });
  });
});// var chartData = [343, 123, 432, 963]; // test chart
var canvas, ctx;

function initChart() {
  canvas = document.getElementById('chart');
  ctx = canvas.getContext('2d');
  drawChart(80, 370);
}

function drawChart(x, y) {
  ctx.fillStyle='orangered';
  for (var i = 0; i < chartData.length; i++) {
    ctx.fillRect(x + i * 100, y, 60, chartData[i] / -10);
  }
}

Здесь используется callback - сначала вызывается getMembers, начинается запрос к VK и возвращается undefined. После этого запрос выполняется, и вызывается ваша функция. Ее return уходит в никуда. Для этого вы должны переписать функцию, чтобы ей в параметре давался callback - функция, которая вызывается после выполнения. В моем коде вызывается getMembers(1) и сохраняется в gr1, потом getMembers(2) и т. д. Затем вызывается chartData = [gr1, gr2, gr3, gr4]. После этого пишете свой код.

Comments

[Ирина Соколовская]

Спасибо, но к сожалению, не работает. chartData в консоли выводит [undefined, undefined, undefined, undefined].

[Ivanq]

Ирина Соколовская: А что в консоли? Что выводит console.log() ?

[Ирина Соколовская]

Ivanq: console.log() выводит корректные данные. Я поняла, проблема в том что chartData определялась внутри getMembers. Если сделать var chartData глобальной переменной, а присваивать значение внутри, то все работает. Спасибо еще раз!

[Ivanq]

Ирина Соколовская: Лучше было обрабатывать chartData на строке после var chartData=...
Иначе может не заработать.