gpt4 book ai didi

javascript - 如何从JSON中获取数据并与页面中的数据进行比较?

转载 作者:行者123 更新时间:2023-11-28 03:41:31 25 4
gpt4 key购买 nike

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

因此,我需要:

1)从json点获取所有事件的start_at(事件日期)

2) 将 json 中的 start_at 项与日历中的日期进行比较

3) 如果第 2 段为真,则在末尾添加事件名称。

请帮我制作第1段和第2段。因为当我尝试自己制作它们时,我有这样的errors .

Code on GitHub

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>

最佳答案

发生这种情况是因为 buildCalendar 在任何获取请求完成之前被调用。

let 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 点,我只是修复了你的语法并使其有望正常工作。

关于javascript - 如何从JSON中获取数据并与页面中的数据进行比较?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57268868/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com