How can I use this local .txt file in my js code?-CodePudding

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!

CodePudding user response：

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)'
//   }
// ]