Javascript Read Object Array

Question

У меня есть код jquery, из которого я получаю отчет с данными по дням недели.
Я хочу прочитать объект массива, возвращаемый ajax.
Вот скрипт:

<script>
export default {
    data() {
        return {
            currentcohortgraphdata: [{"Monday":"0","Tuesday":"0","Wednesday":"0","Thursday":"0","Friday":"0","Saturday":"0","Sunday":"0"}],
        }
    },
    mounted() {

    },
    methods: {
        loadCohortAttendancies() {
            this.$Progress.start();
            axios.get("api/loadCohortAttendancies").then(({data}) => (this.currentcohortgraphdata = data));
            this.$Progress.finish();
            var result = this.currentcohortgraphdata;

            result.forEach(function (e) {
                if (e.Monday > 0) {
                    alert(e.Thursday);
                }
            });
        }
    },
    created() {
        this.loadCohortAttendancies();
    },
    mounted() {

    }
}

Когда я запускаю приведенный выше скрипт из ajax-запроса axios.get("api/loadCohortAttendancies").then(({data}) => (this.currentcohortgraphdata = data)); Результаты, возвращаемые по запросу, равны [{"Monday":"12","Tuesday":"10","Wednesday":"3","Thursday":"5","Friday":"4","Saturday":"1","Sunday":"9"}] , Но, к сожалению, когда я запускаю скрипт, я не получаю результат от alert(e.Thursday); части скрипта, может кто-нибудь указать, где я ошибаюсь? Заранее спасибо

Answer 1

Поскольку JavaScript асинхронный, ваш result.forEach работает до того, как ваш запрос axios будет выполнен.Вы можете исправить это, просто переместив этот блок кода, который полагается на установленную currentcohortgraphdata, в другой блок .then(), следующий за тем, который устанавливает данные.Вот так:

loadCohortAttendancies() {
  this.$Progress.start()
  axios.get("api/loadCohortAttendancies")
    .then({data} => this.currentcohortgraphdata = data)
    .then(() => {
      this.$Progress.finish();
      var result = this.currentcohortgraphdata

      result.forEach(e => {
        if (e.Monday > 0) {
          alert(e.Thursday)
        }
      })
    })
}

Answer 2

Когда вы выполняете forEach, метод запроса axios.get еще не был выполнен.

Итак, измени свой код и попробуй вот так

loadCohortAttendancies() {
  this.$Progress.start();
  axios.get("api/loadCohortAttendancies").then(({data}) => {
    this.currentcohortgraphdata = data;
    this.currentcohortgraphdata.forEach(function (e) {
      if (e.Monday > 0) {
        alert(e.Thursday);
      }
    });
    this.$Progress.finish();
  });
}

Answer 3

Происходит то, что вы выполняете свой код до того, как ваш запрос будет выполнен, и это приводит к тому, что ваш forEach запускается со значениями по умолчанию

currentcohortgraphdata: [{"Monday": "0","вторник": "0", "среда": "0", "четверг": "0", "Пятница": "0", "Суббота": "0", "воскресенье": "0"}],

Просто переместите ваш код внутрь .then block

axios.get("api/loadCohortAttendancies").then(({data}) => {
     this.currentcohortgraphdata = data
     this.$Progress.finish();
     var result = this.currentcohortgraphdata;

     result.forEach(function (e) {
         if (e.Monday > 0) {
             alert(e.Thursday);
         }
     });
});

В качестве альтернативы вы можете использовать async / await синтаксис:

methods: {
  async loadCohortAttendancies() {
    this.$Progress.start();
    const { data } = await axios.get("api/loadCohortAttendancies");
    this.currentcohortgraphdata = data;
    this.$Progress.finish();
    const result = this.currentcohortgraphdata;

    result.forEach(function (e) {
      if (e.Monday > 0) {
        alert(e.Thursday);
      }
    });
  }
},