时间戳

首页 > 解决方案 > 无论如何要向 JavaScript 的对象数组插入变量吗？

javascript - 无论如何要向 JavaScript 的对象数组插入变量吗？

问题描述

我正在做一个小项目：

  1. 读取 CSV 文件（如员工姓名和班次）
  2. 将数据填充到 Fullcalendar。

如何在这行代码中显示 CSV 的结果： { id: 'a', title: 'Auditorium A' },

例如我们可以这样做吗？{ id：数据[0]，标题：数据[1] }

以下是读取 CSV 文件的代码：

<script>
    //Read CSV
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "data.txt",
            dataType: "text",
            success: function(data) {processData(data);}
         });
    });
    
    function processData(allText) {
        var allTextLines = allText.split(/\r\n|\n/);
        var headers = allTextLines[0].split(',');
        var lines = [];
    
        for (var i=1; i<allTextLines.length; i++) {
            var data = allTextLines[i].split(',');
            if (data.length == headers.length) {
    
                var tarr = [];
                for (var j=0; j<headers.length; j++) {
                    tarr.push(headers[j]+":"+data[j]);
                }
                lines.push(tarr);
            }
            console.log(allText);
            return allText[0];
        }

    }

这是我要更改的 FullCalendar 代码：

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    height: '100%',
    aspectRatio: 1.8,
    editable: false, // enable draggable events
    now: '2020-09-07',
    scrollTime: '00:00', // undo default 6am scrollTime
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth,listWeek'
    },
    initialView: 'resourceTimelineDay',
    views: {
      resourceTimelineThreeDays: {
        type: 'resourceTimeline',
        duration: { days: 3 },
        buttonText: '3 days'
      }
    },
    expandRows: true,
    resourceAreaHeaderContent: 'Employees',
    
    resources: [
    
      { id: 'a', title: 'Auditorium A' },
      { id: 'b', title: 'Auditorium B', eventColor: 'green' },
      { id: 'z', title: 'Auditorium Z' }
    ],


    events: [
      { id: '1', resourceId: 'b', start: '2020-09-07T02:00:00', end: '2020-09-07T07:00:00', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2020-09-07T05:00:00', end: '2020-09-07T22:00:00', title: 'event 2' },
      { id: '3', resourceId: 'f', start: '2020-09-07T00:30:00', end: '2020-09-07T02:30:00', title: 'event 3' }
    ]
  });

  calendar.render();
});

标签： javascriptajax

解决方案

我建议通过 ajax 加载数据，然后对其进行处理，然后按该顺序创建日历。所以从你的ajax：

    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) { createCalendar(processData(data));}
     });

然后将您的日历初始化粘贴到一个函数中，map()并将数据粘贴到一个可用的对象数组中，例如

resources: data.map(e => ({id: e[0], title: e[1] })),

总共：

let calendar // store your calendar object reference outside the function
function createCalendar(data) {
  calendar = new FullCalendar.Calendar(calendarEl, {
    height: '100%',
    aspectRatio: 1.8,
    editable: false, // enable draggable events
    now: '2020-09-07',
    scrollTime: '00:00', // undo default 6am scrollTime
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth,listWeek'
    },
    initialView: 'resourceTimelineDay',
    views: {
      resourceTimelineThreeDays: {
        type: 'resourceTimeline',
        duration: { days: 3 },
        buttonText: '3 days'
      }
    },
    expandRows: true,
    resourceAreaHeaderContent: 'Employees',
    resources: data.map(e => ({id: e[0], title: e[1] })),    
    events: [
      { id: '1', resourceId: 'b', start: '2020-09-07T02:00:00', end: '2020-09-07T07:00:00', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2020-09-07T05:00:00', end: '2020-09-07T22:00:00', title: 'event 2' },
      { id: '3', resourceId: 'f', start: '2020-09-07T00:30:00', end: '2020-09-07T02:30:00', title: 'event 3' }
    ]
  });

  calendar.render();
});
}

推荐阅读