- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
下午好,请告诉我。我写了一个日历,现在我有一个 json 文件,其中包含事件信息,我希望事件的名称和事件类型准确地在记录的那一天显示在日历中。
因此,我需要:
1)从json点获取所有事件的start_at(事件日期)
2) 将 json 中的 start_at 项与日历中的日期进行比较
3) 如果第 2 段为真,则在末尾添加事件名称。
请帮我制作第1段和第2段。因为当我尝试自己制作它们时,我有这样的errors .
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/
我需要您在以下方面提供帮助。近一个月来,我一直在阅读有关任务和异步的内容。 我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法,并且它们都按预期工作: public Htt
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。 在这个例子中... define([], function () { "use
影响我性能的前三项操作是: 获取滚动条 获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格,其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时,它运
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
我最近一直在使用 sysctl 来做很多事情,现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意,当我尝试获取其他变量 HW_MACHINE 时,此代码可以完美运行。我还认为
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分,我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我使用 Gridlayout 在一行中放置 4 个元素。首先,我有一个 JPanel,一切正常。对于行数变大并且我必须能够向下滚动的情况,我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
由于以下原因,我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
我知道有很多关于此的问题,例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
如何获取文件中的最后一个字符,如果是某个字符,则删除它而不将整个文件加载到内存中? 这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
我是这个社区的新手,想出了我的第一个问题。 我正在使用 JSP,我成功地创建了 JSP-Sites,它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
我有一个函数,我们将其命名为 X1,它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y?执行.on后X1的结果? 最佳答案 您可以更改 Y 的范围以使其位于函
我是一名优秀的程序员,十分优秀!