通过json脚本读取一个Json文件并显示在网页中答案

【问题标题】：Read a Json file through a json script and display it in a web page通过json脚本读取一个Json文件并显示在网页中
【发布时间】：2020-04-27 17:49:11
【问题描述】：

我是 web 和 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>

这样它就可以工作了，但是只要我用 var rdv = require('./rdv.json'); 替换脚本中的变量“data” （您可能已经猜到 rdv.json 包含与 var 数据中的 Json 完全相同的信息，格式相同）它不显示任何内容。那你能告诉我这里出了什么问题吗？

感谢您的帮助

【问题讨论】：

您好，您需要分享一些代码来扩展您的问题并为我们提供一些帮助。理想的情况是rdv.json 文件的示例数据，让我们了解数据结构。此外，您的日历的初始化脚本。如果它显示了一些东西，如果有任何控制台错误，你也应该添加。
不确定你的设置到底是什么，但你不能在网络上做require('./rdv.json')，除非你有某种构建工具可以将 import/require 语句转换成浏览器可以执行的东西理解。向我们展示您的代码并准确解释您正在使用什么（设置），然后我们将能够提供帮助
确保您在不使用 Node.js 时没有遵循 Node.js 的说明。
抱歉，由于我是新手，在显示代码时遇到了一些问题。我现在已经添加了这段代码。
@Developer 如果这就是您没有设置/构建过程的全部（webpack 或parcel），那么require 语句将不起作用。如果你愿意，你应该研究前端构建工具，因为这在浏览器中不能开箱即用。

标签： javascript html css json

【解决方案1】：

正如 cmets 中指出的那样，require('./rdv.json') 不是默认情况下在浏览器中找到的标准 javascript。您可能会对nodejs 或其他一些javascript 框架感到困惑。解决您问题的方法改编自here，如下：

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();
    });
});

希望这个答案对你有所帮助！

【讨论】：