Почему после двух запросов мой массив не определен?(используя chart.js и stock.js)

Question

Я пытаюсь построить график акций, используя chart.js и stocks.js для отображения акций. Я использую две функции для этого. Один, полученный при нажатии кнопки, и другой, который очищает данные и обновляет диаграмму.

Я пытался изменить то, что отображается, как оно обновляется, как я очищаю данные, а также другие вещи. Я новичок в JavaScript. При нажатии кнопки HTML она активирует функцию oneday. У меня есть другие кнопки, которые делают то же самое, но с разным временем и т. Д. Сейчас это работает, когда я нажимаю одну из кнопок, затем, когда я нажимаю другую, она меняется, но третья имеет ось X как неопределенную, тогда четвертая имеет обе оси как неопределенные.

function clearwithtimes(){
        async function request(){
            var result = await stocks.timeSeries({
                symbol: stock,
                interval: interval,
                amount: time
             });
             var datesdata = result;
             for (i in datesdata){
                     //Loops through array
                 delete datesdata[i].high
                 delete datesdata[i].low
                 delete datesdata[i].close
                 delete datesdata[i].volume
                 delete datesdata[i].open
             }
             var stringeddates = JSON.stringify(datesdata);
             var step;
             stringeddates = stringeddates.replace('[{"date":"', '');
             for (step = 0; step < time; step++) {
                 stringeddates = stringeddates.replace('T', ' ');
                 stringeddates = stringeddates.replace('.000Z', '');
                 stringeddates = stringeddates.replace('",', '#');
                 stringeddates = stringeddates.replace('"},{"date":"', '#');
             }
             stringeddates = stringeddates.replace('},{"date":"', '#');
             stringeddates = stringeddates.replace('T19:00:00.000Z"}]', '');
             stringeddates = stringeddates.replace('T19:00:00.000Z"', '');
             stringeddates = stringeddates.replace('"}]', '');
             stringeddates = stringeddates.split("#");

             var result = await stocks.timeSeries({
                 symbol: stock,
                 interval: interval,
                 amount: time
                });
            for (i in result){
                    //Loops through array
                delete result[i].high
                delete result[i].low
                delete result[i].close
                delete result[i].volume
                delete result[i].date
             }
         var numberlist = JSON.stringify(result);
         var step;
         numberlist = numberlist.replace('[{"open":', '');
         for (step = 0; step < time; step++) {
         numberlist = numberlist.replace('},{"open":', '#');
     }
         numberlist = numberlist.replace('},{"open":', '#');
         numberlist = numberlist.replace('}]', '');
         numberlist = numberlist.split("#");
         finalprices = numberlist.reverse();
         finaldates = stringeddates.reverse();
         stockGraph.data.datasets[0].data = finalprices;
         stockGraph.data.labels = finaldates;
         stockGraph.update();
        }
        request();
    }
    function oneday() {
        stockform=document.getElementById("stockname");
        stock=stockform.elements["Stock"].value;
        time = 96;
        interval = '15min';
        clearwithtimes();
    }

Что должно произойти, когда я активирую однодневную функцию несколько раз, ось не должна быть неопределенной.

Answer 1

Вы сталкиваетесь с ограничениями по ставкам, и ни stocks.js, ни API Alpha Vantage не сообщают о каких-либо ошибках, когда это происходит. Изучите XHR-ответ, когда ваши оси стали шаткими:

{
«Примечание»: «Благодарим Вас за использование Alpha Vantage! Наша стандартная частота вызовов API составляет 5 вызовов в минуту и ​​500 вызовов в день. Пожалуйста, посетите https://www.alphavantage.co/premium/, если вы хотите настроить более высокую частоту вызовов API.»
}

Как правило, вы должны стараться быть хорошим гражданином при работе с удаленными API и не делать больше запросов, чем необходимо. Ваша request() функция получает одни и те же данные дважды, предположительно потому, что вы уничтожаете некоторые данные, которые вам понадобятся позже. Рефакторинг функции, и вам нужно всего лишь один раз нажать API:

function clearwithtimes() {
  async function request() {
    const result = await stocks.timeSeries({
      symbol: stock,
      interval: interval,
      amount: time
    });

    if (result.length === 0) {
      console.log('Something went wrong!');
      return;
    }

    const finaldates = result.map(series =>
      series.date      // get the date from each series,
        .toISOString() // convert it to a string, e.g. "2019-05-11T10:10:23.323Z",
        .split('T')[0] // split it in two at the "T", and return the first half
    ).reverse();
    const finalprices = result.map(series => series.open).reverse();

    stockGraph.data.datasets[0].data = finalprices;
    stockGraph.data.labels = finaldates;
    stockGraph.update();
  }
  request();
}

Единственный способ stocks.timeSeries() сказать вам, что вы достигли предела, это вернуть пустой массив. Проверьте это перед обновлением графика.

result.map() возвращает новый массив на основе массива result без его изменения. Гораздо предпочтительнее пытаться работать с необработанными строками JSON.

В идеале вы должны кэшировать значение result и обновлять диаграмму на основе этого кэшированного значения, когда это возможно.