@UPSA
anykey

Как правильно обработать массив JSON (или объект) из Axios?

Начинающий - тупо беру код из примеров. Просьба объяснить на пальцах )))
Ошибки:
"TypeError: e.Deadlines is not a constructor"
"TypeError: Cannot read property e.Deadlines of null"
Толи я не понимаю область видимости переменных
Толи я не понимаю Диаграмма жизненного цикла

Как я это представляю:
Беру MainData из Axios. Отрезаю пустую Дату. Добавляю фильтр через radio на даты.
Начались ошибки с фильтром на пустую дату. В computed отказалась работать. Хорошо - поставил фильтр в Axios - работает. Дальше хуже.
Загрузка компонента:
Компонент правильно отображает две записи - выкидывает пустую запись, но ...
Ответ в консоле: null и "mounted". MainData = null. Уппппс...
Нажимаю кнопку radio = "TypeError: e.Deadlines is not a constructor". В консоле - undefined
Опять Нажимаю кнопку radio = консоль наконец отображает массив.
Что то я не понимаю с видимостью и инициализацией...

И подозрение что вообще неправильно написал FilterMainData. В template мне надо MainData менять. Если в template пишу "value in FilterMainData", то список не отображает. Так что и тут ткните меня. )))

Есть template
<template>
  <div class="News">
    <input type="radio" id="All" value="All" v-model="picked">
    <label for="All">Все</label>
    <input type="radio" id="Active" value="Active" v-model="picked">
    <label for="Active">Активные</label> {{picked}}
    <article v-for="value in MainData" v-bind:key="value.id">
    <ul>
      <template v-if="value.Deadlines"> // это лишнее. но для теста нужна была
        <li><div>Сроки</div></li>
        <li><div>{{value.Deadlines}}</div></li>
      </template>
    </ul>
    </article>
  </div>
</template>

Есть script
<script>
import axios from 'axios';
export default {
  name: 'List',
  data() {
    return {
      MainData: null,
      picked: "All"
    }
  },
  mounted: function(){
    axios
      .get('http://localhost:8080/static/MainData.json')
      .then(response=>(this.MainData=response.data.filter(function(e){
        return e.Deadlines.length >0;
      })
      ))
      .catch(error=>console.log(error)); // Надеюсь тут MainData уже определена?
      this.FilterMainData();
      console.log("mounted");
  },
  methods: {
    FilterMainData: function(){ // тут как то надо MainData возвращать 
      if(this.picked != "All"){
        console.log(this.MainData.Deadlines);  //ошибка
        return this.MainData.filter(function(e){
          var NowDate = new Date();
          var EndDate = new (e.Deadlines); // Вот тут ЗАСТРЯЛ
          console.log("FilterMainData");
          return EndDate-NowDate > 0
        });
      }else{
        console.log(this.MainData);
        return this.MainData //ошибка MainData = null.
      }
    }
  },
  watch: {
    picked: function(){
      return this.FilterMainData(); 
    }
  }
}
</script>

Есть MainData
[
{"id":1, "Deadlines":  ""},
{"id":2, "Deadlines":  "28.10.2020 "},
{"id":2, "Deadlines":  "08.05.2020 "}
]
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
new Date(e.Deadlines)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы