Javascript 如何从JSON中获取数据并将其与页面中的数据进行比较？

下午好，请告诉我。我写了一个日历，现在我有了一个json文件，其中包含了事件的信息，我希望事件的名称和事件的类型能够准确地显示在日历中记录事件的那一天

因此，我需要：

1） 从json点获取所有事件的开始时间（事件日期）

2） 将json中项目的起始日期与日历中的日期进行比较

3） 如果第2段为真，则在末尾添加事件名称

请帮我把第一段和第二段写出来。因为当我试着自己做的时候，我有这样的想法

JSON的代码：

{
  "meta": {
    "unremovable": [
      1
    ],
    "types": [
      [
        1,
        "public_holiday"
      ],
      [
        2,
        "day_off"
      ],
      [
        4,
        "birthday"
      ],
      [
        8,
        "meeting"
      ],
      [
        16,
        "other"
      ]
    ]
  },
  "events": [
    {
      "id": 211,
      "starts_at": "2019-03-08",
      "ends_at": "2019-03-08",
      "memo": "Международный женский день",
      "type": 3
    },
    {
      "id": 212,
      "starts_at": "2019-10-07",
      "ends_at": "2019-10-07",
      "memo": "День учителя",
      "type": 1
    },
    {
      "id": 213,
      "starts_at": "2019-10-14",
      "ends_at": "2019-10-14",
      "memo": "День защитника Украины",
      "type": 3
    },
    {
      "id": 214,
      "starts_at": "2019-10-18T14:00:00Z",
      "ends_at": "2019-10-18T15:00:00Z",
      "memo": "Созвон с Киевом",
      "type": 8
    },
    {
      "id": 215,
      "starts_at": "2019-10-18T09:00:00Z",
      "ends_at": "2019-10-18T13:15:00Z",
      "memo": "Велопрогулка",
      "type": 16
    },
    {
      "id": 216,
      "starts_at": "2019-10-22",
      "ends_at": "2019-10-22",
      "memo": "Гуляем в парке",
      "type": 16
    },
    {
      "id": 217,
      "starts_at": "2019-10-28",
      "ends_at": "2019-11-03",
      "memo": "Конференция",
      "type": 18
    }, 
    {
      "id": 218,
      "starts_at": "2019-11-03T21:43:00Z",
      "ends_at": "2019-11-03T21:43:00Z",
      "memo": "Самолёт домой",
      "type": 16
    },
    {
      "id": 219,
      "starts_at": "2019-11-11",
      "ends_at": "2019-11-11",
      "memo": "ДР",
      "type": 4
    }
  ]
}

日历代码：

<template>
  <div class="all">
    <div class="overflow-div">
      <div class="pagination">
        <div @click="prevPage" class="btn-left"><</div> 
        <p>{{ nameOfOneMonth }} {{ year }}</p>
        <div @click="nextPage" class="btn-right">></div> 
      </div>

        <div class="d_nameOfDays">
          <li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
        </div>
        <transition :name="nameOfClass" >
          <div :key="currentPage" class="fade_wrapper">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" class="li_day">
            <div class="day" 
               v-bind:class="{ 'grey': isAnotherMonth(i, day), 'currentDay': currentDayOnCalendar(day) }"
               >{{ day }}</div>
            </li>
            </div>
          </div>
        </transition>
    </div>
  </div> 
</template>

<script>
  import link from './Calendar_data.json';
export default {
  data(){
    return{
      currentPage: 0,
      namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      nameOfOneMonth: '',
      nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      date: new Date(),
      isActive: true,
      year: '',
      nameOfClass: '',
      eventsData: []
    }
  },
  created: function(){
    fetch(link)
    // .then(response => response.json())
    .then(data => (
      this.eventsData = data
      ));
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    }
  },
  mounted(){
    this.year = this.date.getFullYear();
    this.currentPage = this.date.getMonth();
    this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
  },
  methods: {
    prevPage(){
      if (this.currentPage === 0) {
        this.currentPage = 12;
        this.year--;
      }
      this.nameOfClass = 'prev';
      this.currentPage--;
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    nextPage(){
      if (this.currentPage === 11) {
        this.currentPage = -1;
        this.year++;
      }
      this.nameOfClass = 'next';
      this.currentPage++;
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    isAnotherMonth(weekIndex, dayNumber) {
      if(weekIndex === 0 && dayNumber > 15) {
        return true
      }
      if (weekIndex === 4 && dayNumber < 15) {
        return true
      }
      if (weekIndex === 5 && dayNumber < 15) {
        return true
      }
      return false
    },
    currentDayOnCalendar(dayNumber){
      if(this.currentPage === this.date.getMonth() && 
        dayNumber === this.date.getDate() && 
        this.year === this.date.getFullYear()){
        return true
      }
      return false
    },
    getYear(){
      this.year = this.date.getFullYear();
    },
    getLastDayOfMonth(month) { 
      let dateDaysInMonth = new Date(this.year, month + 1, 0);
      return dateDaysInMonth.getDate();
    },
    getNumberOfFirstDayInMonth(month){ 
      let dateFirstDayInMonth = new Date(this.year, month, 1);
      return dateFirstDayInMonth.getDay();
    },
    buildCalendar(){
      let massOfMonth = [];
      let massOfEvents = this.eventsData.events;
      for (let months = 0; months < 12; months++){
        massOfMonth.push(months);
        massOfMonth[months] = [];
        for ( let daysInMonth = 1; daysInMonth <= this.getLastDayOfMonth(months); daysInMonth++){
          massOfMonth[months].push(daysInMonth);
          massOfMonth[months][daysInMonth] = [];
          for(let m = 0; m <=massOfEvents.length; m++){
            let v = massOfEvents[m].starts_at;
            let d = new Date(v);
            console.log(m)
          }
        }
        if(this.getNumberOfFirstDayInMonth(months) > 0){
          let t = this.getLastDayOfMonth(months-1) + 1;
          for(let b = 0; b <= this.getNumberOfFirstDayInMonth(months) - 2; b++){
            t--;
            massOfMonth[months].unshift(t)
          }
        }else if(this.getNumberOfFirstDayInMonth(months) === 0){
          let t = this.getLastDayOfMonth(months-1) + 1;
          for(let nulldays = 0; nulldays <= 5; nulldays++){
            t--;
            massOfMonth[months].unshift(t);
          }
        }
        if((this.getNumberOfFirstDayInMonth(months) === 0 || 
          this.getNumberOfFirstDayInMonth(months) === 6) &&
          (this.getNumberOfFirstDayInMonth(months + 1) > 1 &&
          this.getNumberOfFirstDayInMonth(months + 1) < 3)){
          let t = 0;
          for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 7; q++){
            t++;
            massOfMonth[months].push(t);
          }
        } else{
          let t = 0;
          for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 14; q++){
            t++;
            massOfMonth[months].push(t);
          }
        }
      }
      var longArray = massOfMonth[this.currentPage];
      var size = 7;

      var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
          .map(function() { 
            return this.splice(0, size) 
          }, longArray.slice());
        return newArray; 
    }
  }
};
</script>

{{day}

{{day}

从“/Calendar_data.json”导入链接；
导出默认值{
数据（）{
返回{
当前页面：0，
月份名称：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
每月的名称：“”，
日期名称：[“Пб”、“Сб”、“Чб”、“Пб”、“Сб”、“Сб”]，
日期：新日期（），
是的，
年份：''，
类的名称：“”，
事件数据：[]
}
},
已创建：函数（）{
获取（链接）
//.then（response=>response.json（））
。然后（数据=>(
this.eventsData=数据
));
},
计算：{
getCalendar（）{
返回此.buildCalendar（）；
}
},
安装的（）{
this.year=this.date.getFullYear（）；
this.currentPage=this.date.getMonth（）；
this.nameofMonth=this.nameofMonts[this.currentPage]；
},
方法：{
前页（）{
如果（this.currentPage==0）{
此.currentPage=12；
今年--；
}
this.nameOfClass='prev'；
此.currentPage--；
this.nameofMonth=this.nameofMonts[this.currentPage]；
},
下一页（）{
如果（this.currentPage==11）{
this.currentPage=-1；
今年；
}
this.nameOfClass='next'；
这个.currentPage++；
this.nameofMonth=this.nameofMonts[this.currentPage]；
},
isAnotherMonth（weekIndex，dayNumber）{
如果（weekIndex==0&&dayNumber>15）{
返回真值
}
如果（weekIndex==4&&dayNumber<15）{
返回真值
}
如果（weekIndex==5&&dayNumber<15）{
返回真值
}
返回错误
},
currentDayOnCalendar（日数）{
如果（this.currentPage==this.date.getMonth（）&&
dayNumber==this.date.getDate（）&&
this.year==this.date.getFullYear（））{
返回真值
}
返回错误
},
getYear（）{
this.year=this.date.getFullYear（）；
},
getLastDayOfMonth（月）{
let dateDaysInMonth=新日期（今年，月份+1,0）；
return dateDaysInMonth.getDate（）；
},
getNumberOfFirstDayInMonth（月）{
让dateFirstDayInMonth=新日期（this.year，month，1）；
返回日期firstDayinMonth.getDay（）；
},
buildCalendar（）{
设massOfMonth=[]；
让massOfEvents=this.eventsData.events；
对于（让月数=0；月数<12；月数++）{
月推力的质量（月）；
massOfMonth[月]=[]；
对于（让daysInMonth=1；daysInMonth发生这种情况是因为在任何提取请求完成之前调用了
buildCalendar
）

让massOfEvents=this.eventsData.events；
eventsData是一个空数组，因此其属性
events
未定义。因此，无法读取其长度（
massOfEvents.length
）

重构您的
buildCalendar
函数，以便它设置一些数据，比如说已处理事件，例如：

data(){
    return{
        currentPage: 0,
        ...
        eventsData: [],
        processedEvents: []
    }
  },
  ...
  methods: {
     buildCalendar () {
        ...
        ...
        this.processedEvents = newArray;
     }
  }

…并在模板中使用
processedEvents
而不是
getCalendar
；如下所示：

<div v-for="(week, i) in processedEvents" class="d_day">



我没有真正检查你的1…3点，我只是修正了你的语法，希望它能正常工作。
这是因为在任何提取请求完成之前调用了
buildCalendar

让massOfEvents=this.eventsData.events；
eventsData是一个空数组，因此其属性
events
未定义。因此，无法读取其长度（
massOfEvents.length
）

重构您的
buildCalendar
函数，以便它设置一些数据，比如说已处理事件，例如：

data(){
    return{
        currentPage: 0,
        ...
        eventsData: [],
        processedEvents: []
    }
  },
  ...
  methods: {
     buildCalendar () {
        ...
        ...
        this.processedEvents = newArray;
     }
  }

…并在模板中使用
processedEvents
而不是
getCalendar
；如下所示：

<div v-for="(week, i) in processedEvents" class="d_day">



我没有真正检查你的1…3点，我只是修正了你的语法，希望它能正常工作。
entio，请检查我的GitHub，我按照你说的做了一切，错误消失了，但我的日历没有显示entio，请检查我的GitHub，我按照你说的做了一切，错误消失了，但我的日历没有显示我