如何在我的 js 代码中使用此 local.txt 文件？

Question

I have succeeded in using MechanicalSoup (Python library) to scrape the data from my school's website(s) and have created two.txt files (upcomingFixturesData.txt and resultsFixturesData.txt) which I would like to use to fill the content of one of my tables (I'm using Gatsby as a single-page site). The.txt documents both look like this:

22/03/2022
4:15pm
Hockey
Hockey v SchoolName: U16 (a, leave at 3.00pm)

22/03/2022
10:00am
Fives
Fives National Championships: U18 (SchoolName, leave at 9.00am)

22/03/2022
4:00pm
Netball
Netball: Leavers v Common Room (h)

Currently, my js code is using dummy data for the sports tables:

export default function SportsSection() {
  return (
    <Wrapper>
      <RowWrapper>
        <Description>Fixtures</Description>
        <Row
          number="1"
          title="Football"
          subtitle="Boys' U14 A and B team v SchoolName (away, leave at 12:20pm)"
          time="14:30"
        />
        <Row
          number="2"
          title="Hockey"
          subtitle="Hockey v SchoolName: U16 and 2st XI (away, depart 2.00pm)"
          time="15:45"
        />
        <Row
          number="3"
          title="Netball"
          subtitle="Netball: A and B team v SchoolName (home)"
          time="16:20"
        />
        <Row
          number="4"
          title="Rowing"
          subtitle="J15 vs SchoolName (Location)"
          time="15:30"
        />
      </RowWrapper>
    </Wrapper>
  )
}

I made a similar table to show each pupil's timetable, which was much easier as it was already a.json file, and I was able to use a 'map':

export default function TimetableSection() {
  const data = require("../../data/scraped/timetableWeekData.json")

  var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
  var d = new Date()
  var dayName = days[d.getDay()]
  var tmrName = days[d.getDay() + 1]

  var hrs = new Date().getHours()

  const todayData = data.events.filter(
    // event => event["start-date-display"] == "Today"
    event => event.description.includes(hrs <= 20 ? dayName : tmrName)
  )

  return (
    <Wrapper>
      <RowWrapper>
        <Description>Timetable {hrs <= 20 ? "Today" : "Tomorrow"}</Description>
        {todayData.map((item, index) => (
          <Row
            number={index + 1}
            title={item.subject}
            color={item.colour}
            subtitle={item.chairperson + ", " + item.location}
            time={item.starttime}
          />
        ))}
      </RowWrapper>
    </Wrapper>
  )
}

Is there any way that I could map the.txt files in order to populate each of my table rows, or failing that, how else could I go about using this data (which is inside the project file system) in my javascript code?

Thanks so much for your help in advance!

Answer 1

simply like this, but with this function, your txt require correct structure to mapping

const fs = require("fs");
const _ = require("lodash");

const fileTxt = fs.readFileSync("./test.txt", { encoding: "utf-8" });

const eachData = fileTxt.split(/^\r\n/gm); // split for each object

const resultArr = [];
let number = 0;
eachData.forEach((data) => {
  const arrOneData = data.split(/\r\n/gm); // split for each object property
  resultArr.push({
    number,
    date: arrOneData[0],
    time: arrOneData[1],
    title: arrOneData[2],
    subtitle: arrOneData[3],
  });
  number += 1;
});

console.log("resultArr", resultArr);

// resultArr [
//   {
//     number: 0,
//     date: '22/03/2022',
//     time: '4:15pm',
//     title: 'Hockey',
//     subtitle: 'Hockey v SchoolName: U16 (a, leave at 3.00pm)'
//   },
//   {
//     number: 1,
//     date: '22/03/2022',
//     time: '10:00am',
//     title: 'Fives',
//     subtitle: 'Fives National Championships: U18 (SchoolName, leave at 9.00am)'
//   },
//   {
//     number: 2,
//     date: '22/03/2022',
//     time: '4:00pm',
//     title: 'Netball',
//     subtitle: 'Netball: Leavers v Common Room (h)'
//   }
// ]