Форум программистов, компьютерный форум, киберфорум
JavaScript: Vue.js
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 27.05.2019
Сообщений: 17
1

Как получить данные из JSON и сравнить их с данными со страницы?

30.07.2019, 16:46. Просмотров 933. Ответов 1


Добрый день, пожалуйста, скажите мне. Я написал календарь, и теперь у меня есть файл json, в котором содержится информация о событиях, я хочу, чтобы название события и тип события отображались в календаре именно в тот день, в который оно записано.

Поэтому мне нужно:

1) Получить из json пункт start_at (дата события) всех событий

2) Сравните элементы start_at из json с датами в календаре

3) Если параграф 2 верен, то добавить в конец название события.

Помогите, пожалуйста, сделать абзац 1), чтобы я могу пользоваться ними для выполнения всех остальных пунктов. Потому что, когда я пытался сделать их сам, у меня была такая ошибка:


Скриншот ошибки


Мой код который есть сейчас на ГитХаб

Код JSON:

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
{
  "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
    }
  ]
}
Код календаря:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<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 вызывается до того как все данные из json загрузятся, но как решить это я не могу понять.
0
Миниатюры
Как получить данные из JSON и сравнить их с данными со страницы?  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.07.2019, 16:46
Ответы с готовыми решениями:

JSON.NET - получить данные со страницы Вк
Есть JSON строка: response: Надо в текст бокс через строку вывести данные например так ...

Как сравнить данные из $_POST с данными БД?
есть форма регистрации, и надо проверить введенное имя на существование в бд, если есть такое имя...

Как сравнить данные из input с данными с БД?
Как сравнить данные из input с данными с БД? Допустим если текст из input не совпадает, то: echo...

Как можно сравнить данные из файла с вводимыми данными?
У меня есть типо база данных(точнее хочу сделать её), в качестве логина является имя файла, а в...

1
the hardway first
Эксперт JS
2028 / 1512 / 769
Регистрация: 05.06.2015
Сообщений: 3,172
31.07.2019, 09:58 2
Цитата Сообщение от AndreyKiber Посмотреть сообщение
Я предполагаю что ошибка появляется из-за того что мой buildCalendar вызывается до того как все данные из json загрузятся
Конкретно эта ошибка вызвана тем, что вы пытаетесь обратиться к
Javascript
1
2
3
      let massOfEvents = this.eventsData.events;
      /* ... */
          for(let m = 0; m <=massOfEvents.length; m++){
но в this.eventsData у вас пустой массив
Javascript
1
2
3
4
5
6
7
export default {
  data(){
    return{
      /* ... */
      eventsData: []
    }
  },
Обратите внимание на цикл for, т. к. у вас условие меньше или равно длине массива, то будет выход за пределы при обращении по индексу и эта строка
Javascript
1
            let v = massOfEvents[m].starts_at;
вызовет ошибку.

Что вы здесь делаете?
Javascript
1
2
3
4
5
6
7
  created: function(){
    fetch(link)
    // .then(response => response.json())
    .then(data => (
      this.eventsData = data
      ));
  },
В link итак уже объект, вы загрузили JSON
Javascript
1
  import link from './Calendar_data.json';
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.07.2019, 09:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как сравнить данные из нескольких ComboBox на форме, с данными во всех словарях
Подскажите как лучше сравнить данные из нескольких ComboBox на форме, с данными во всех словарях. ...

Как получить данные из JSON?
Доброго времени суток, форумчане. Помогите разобраться с JSON, есть следующий код: &lt;!doctype...

Как получить данные из Json
Как получить значение из &quot;wd&quot;? {&quot;status&quot;:1,&quot;pogoda&quot;:{&quot;Moscow (2)&quot;:{&quot;wd&quot;:7,&quot;lv&quot;:0},&quot;Kazan (1...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.