Считайте файл Json с помощью скрипта json и отобразите его на веб-странице.

Question

Я новичок ie в сети и js программирую, поэтому моя проблема может быть простой. Я нашел фрагмент кода, который позволяет мне создать календарь со всеми рандеву в нем. Данные рандеву форматируются в данные Json и считываются с помощью сценария JS.

Вот код:

<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var data=
[
    {
      "title": "Rdv M.Ba",
      "start": "2020-02-04T10:00:00"

    },
    {
      "title": "Rdv M. Dia",
      "start": "2020-02-07T16:00:00",
      "end": "2020-02-07T16:15:00"
    }
  ];
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  defaultDate: '2020-02-12',
  editable: true,
  navLinks: true, // can click day/week names to navigate views
  eventLimit: true, // allow "more" link when too many events
  events: data
});
calendar.render();
});
</script>

Таким образом, он работает, но как только Я заменяю переменную «data» в скрипте на var rdv = require ('./ rdv. json'); (как вы уже догадались, rdv. json содержит ту же самую информацию, что и Json в данных var в том же формате), она ничего не отображает. Так не могли бы вы сказать мне, что здесь не так?

Спасибо за вашу помощь

Answer 1

, как указано в комментариях require('./rdv.json') не является стандартным javascript, как установлено в браузере по умолчанию. Вы можете быть перепутаны с nodejs или некоторыми другими javascript framework. Способ решения вашего вопроса основан на здесь и выглядит следующим образом:

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', './rdv.json', true);
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4 && xobj.status == "200") {

      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

Здесь мы создали функцию, которая может загрузить файл rdv.json как real json. Поскольку это функция обратного вызова, вы сможете использовать данные следующим образом:

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    loadJSON(function(response) {

        data = JSON.parse(response);

        var calendar = new FullCalendar.Calendar(calendarEl, {
           plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
           },
           defaultDate: '2020-02-12',
           editable: true,
           navLinks: true, // can click day/week names to navigate views
           eventLimit: true, // allow "more" link when too many events
           events: data
        });
        calendar.render();
    });
});

Надеюсь, этот ответ поможет вам!