Расширение данных существующего объекта из массива

Question

Я получаю массивы от API в формате JSON. Я хочу объединить их во вложенный массив с именем, который состоит из объектов graphData. Как расширить объект данных на одну запись?

mounted() {

   var i = 0;
   const axios = require('axios');
    //Usage
    axios.get("https://3.11.40.69:9001/app/usageUnitForCustomer/1521/2019-12-30/2020-12-30")
      .then(response => {
        const time = response.data.event_time; //["2019-12-30T14:06:21.000Z", "2019-12-30T14:06:21.000Z"]
        const unit = response.data.unit; //[44.67, 75.89]
        for (i = 0; i < 1; i++) {
          if (time[i] !== time[i + 1]) {
            this.graphData[1].data.time[i] = unit[i];
          }
        } 
      })
    //Revenue
    axios.get("https://3.11.40.69:9001/app/revenueUnitForMachine/345/2019-12-30/2020-12-30")
      .then(response => {
        const time = response.data.event_time; //["2019-12-30T14:06:21.000Z", "2019-12-30T14:06:21.000Z"]
        const unit = response.data.revenue; //[44, 75]
        for (i = 0; i < 10; i++) {
          if (time[i] !== time[i + 1]) {
            this.graphData[0].data.time[i] = unit[i];
          }
        } 

      })
  },
  data() {
      return {
        graphData: [
          {name: 'Revenue', data: {}},
          {name: 'Usage', data: {}}
        ]
      }
    }

После выполнения вышеуказанного кода оба объекта данных по-прежнему пусты. Результат выглядит так и следующее сообщение об ошибке:

0:
name: "Revenue"
data: Object []

1:
name: "Usage"
data: Object []

Uncaught (in promise) TypeError: Cannot set property '0' of undefined

Ожидаемый результат:

graphData: [
          {name: 'Revenue', data: {'2019-12-30T14:06:21.000Z': 448, '2019-12-30T14:06:22.000Z': 44}},
          {name: 'Usage', data: {'2019-12-30T14:06:21.000Z': 448, '2019-12-30T14:06:22.000Z': 44}}
        ]

Есть у кого-нибудь идея?

Answer 1

Одна проблема, которую я вижу, заключается в том, что вы обращаетесь к time[i] в this.graphData[1].data.time[i] = unit[i];, но он не определен внутри ваших объектов.

Может быть, помогает инициализация его как массива?

data() {
    return {
        graphData: [
          {name: 'Revenue', data: { time: [] }},
          {name: 'Usage', data: { time: [] }}
        ]
    }
}

Редактировать: Хорошо, после того, как вы отредактировали ожидаемый результат, я вижу другую проблему.

Можете ли вы попробовать установить значение таким образом?

this.graphData[1].data[time[i]] = unit[i];

Обратите внимание на дополнительные [] около time[i].

Answer 2

Вы не можете получить доступ к внешним переменным из блока .then (). Вы должны быть в состоянии превратить весь внешний блок в async и использовать await для своих axios вызовов.

Попробуйте что-то вроде этого:

async mounted() {

   var i = 0;
   const axios = require('axios');
    //Usage

   const response = await axios.get("https://3.11.40.69:9001/app/usageUnitForCustomer/1521/2019-12-30/2020-12-30");

        const time = response.data.event_time;
        const unit = response.data.unit;
        for (i = 0; i < 1; i++) {
          if (time[i] !== time[i + 1]) {
            this.graphData[1].data.time[i] = unit[i];
          }
        } 


...

... продолжайте использовать await для остальных вызовов axios.