Changing the format of a data structure using JavaScript/TypeScript

Question

Changing the format of a data structure using JavaScript/TypeScript

Hey there, I have a rowdata that looks like this:

export const ROWDATA: Array<any> = [
    {
        id: "1",
        start_time: "9:00:00",
        end_time: "9:30:00",
        day_of_week: 'monday',
        lesson: "Lesson ABC",
        class: "Class ABC",
        room: "room1",
        education_grade_subject: "Physics",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
    {
        id: "2",
        start_time: "9:30:00",
        end_time: "10:00:00",
        day_of_week: 'monday',
        lesson: "Lesson XYZ",
        class: "Class ABC",
        room: "room2",
        education_grade_subject: "Chemistry",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
   .....

];

This row data serves as the structure for a table on my website. The information is retrieved from the backend and now needs to be converted into a different format for the website. The new format should follow this pattern:

export const DATA: Array<any> = [
    {
        time: "9:00", 
        monday: [
                    {
                        class: 'room1', 
                        title: {field: "lesson", text:"Lesson ABC", class:"lessonABC-title"}, 
                        content: [
                            {field: "education_grade_subject", text: "Physics", class:"lessonABC-subject-class"},
                            {field: "staff", text: "Amanda Jeremy", class:"lessonABC-staff-class"}, 
                            {field: "room", text: "Room 01", class:"lessonABC-room-class"}
                            ], 
                        uid: "1"
                    }
                ]
    },

    {
        time: "9:30", 
        monday: [
                    {class: 'room2', 
                        title: {field: "lesson", text:"Lesson XYZ", class:"lessonXYZ-title"}, 
                        content: [
                            {field: "education_grade_subject", text: "Chemistry", class:"lessonXYZ-subject-class"},
                            {field: "staff", text: "Amanda Jeremy", class:"lessonXYZ-teacher-class"}, 
                            {field: "room", text: "Room 02", class:"lessonXYZ-room-class"}
                            ], 
                        uid: "2"
                    }
                ]
    },
....

The transformation of the second data is solely based on the first data provided. If you have any ideas or suggestions on how I can achieve this in JavaScript as I am relatively new to it, please share. Thanks in advance!

javascript angular typescript

Answer 1

Answer №1

Some of the TypeScript elements have been excluded from this snippet as they are not entirely relevant. The primary focus here is on the logic for parsing the ROWDATA variable. Take a look at the code snippet below with accompanying comments to help clarify its functionality.

const ROWDATA = [
    {
        id: "1",
        start_time: "9:00:00",
        end_time: "9:30:00",
        day_of_week: 'monday',
        lesson: "Lesson ABC",
        class: "Class ABC",
        room: "room1",
        education_grade_subject: "Physics",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
    {
        id: "2",
        start_time: "9:30:00",
        end_time: "10:00:00",
        day_of_week: 'monday',
        lesson: "Lesson XYZ",
        class: "Class ABC",
        room: "room2",
        education_grade_subject: "Chemistry",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
];

const group = [];
const map ={}; // track seen times
ROWDATA.forEach(e => {
  const newClass = {
    class: e.class
    // more info can be added here
  }
  
  if (!map[e.start_time]) {
    map[e.start_time] = true;
    const newEntry = { time: e.start_time };
    newEntry[e.day_of_week] = [];
    newEntry[e.day_of_week].push(newClass);
    group.push(newEntry);
  } else {
    group.map(e2 => {
      if (e.start_time === e2.time) {
        if (e2[e.day_of_week]) {
          e2[e.day_of_week].push(newClass);
        } else {
          console.log('!!!')
          e2[e.day_of_week] = [];
          e2[e.day_of_week].push(newClass);
        }
      }
      return e2;
    });
  }
});

console.log(group)

Answer 2

Some of the TypeScript elements have been excluded from this snippet as they are not entirely relevant. The primary focus here is on the logic for parsing the ROWDATA variable. Take a look at the code snippet below with accompanying comments to help clarify its functionality.

const ROWDATA = [
    {
        id: "1",
        start_time: "9:00:00",
        end_time: "9:30:00",
        day_of_week: 'monday',
        lesson: "Lesson ABC",
        class: "Class ABC",
        room: "room1",
        education_grade_subject: "Physics",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
    {
        id: "2",
        start_time: "9:30:00",
        end_time: "10:00:00",
        day_of_week: 'monday',
        lesson: "Lesson XYZ",
        class: "Class ABC",
        room: "room2",
        education_grade_subject: "Chemistry",
        staff: "Amanda Jeremy",
        timetable: "class timetable",
        modified_user: "admin",
        modified: "2017-01-15",
        created_user: "admin",
        created: "2017-01-15"
    },
];

const group = [];
const map ={}; // track seen times
ROWDATA.forEach(e => {
  const newClass = {
    class: e.class
    // more info can be added here
  }
  
  if (!map[e.start_time]) {
    map[e.start_time] = true;
    const newEntry = { time: e.start_time };
    newEntry[e.day_of_week] = [];
    newEntry[e.day_of_week].push(newClass);
    group.push(newEntry);
  } else {
    group.map(e2 => {
      if (e.start_time === e2.time) {
        if (e2[e.day_of_week]) {
          e2[e.day_of_week].push(newClass);
        } else {
          console.log('!!!')
          e2[e.day_of_week] = [];
          e2[e.day_of_week].push(newClass);
        }
      }
      return e2;
    });
  }
});

console.log(group)

Answer 3

Answer №2

I'm unsure about which aspects of this project require dynamic elements, as it appears you are specifically selecting certain attributes and assigning names based on a predetermined pattern.

Nevertheless, if you wish to process your initial dataset through a function to generate the subsequent output, you can follow these steps:

let updatedData = ROWDATA.map(item => {
    return {
      time: item.start_time,
      [item.day_of_week]: [{
       class: item.room,
        title: {
          field: "lesson",
          text: item.lesson,
          class: "lesson"+item.lesson.substr(item.lesson.length-3)+"-title"
        }
        content: [{ 
          field: "education_grade_subject", 
          text: item.education_grade_subject, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-subject-class"
        }, { 
          field: "staff", 
          text: item.staff, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-staff-class"
        }, { 
          field: "room", 
          text: item.room, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-room-class"
        }]
      }],
      uid: item.id
    };
});

console.log(updatedData);

link:

Answer 4

I'm unsure about which aspects of this project require dynamic elements, as it appears you are specifically selecting certain attributes and assigning names based on a predetermined pattern.

Nevertheless, if you wish to process your initial dataset through a function to generate the subsequent output, you can follow these steps:

let updatedData = ROWDATA.map(item => {
    return {
      time: item.start_time,
      [item.day_of_week]: [{
       class: item.room,
        title: {
          field: "lesson",
          text: item.lesson,
          class: "lesson"+item.lesson.substr(item.lesson.length-3)+"-title"
        }
        content: [{ 
          field: "education_grade_subject", 
          text: item.education_grade_subject, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-subject-class"
        }, { 
          field: "staff", 
          text: item.staff, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-staff-class"
        }, { 
          field: "room", 
          text: item.room, 
          class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-room-class"
        }]
      }],
      uid: item.id
    };
});

console.log(updatedData);

link:

Answer 5

Answer №3

Here's the resolution.

Apologies for using Ramda.js, but leveraging Ramda.js significantly reduced the volume of code required.

const ROWDATA = [
    {
        "class": "Class ABC",
        created: "2017-01-15",
        created_user: "admin",
        day_of_week: "monday",
        education_grade_subject: "Physics",
        end_time: "9:30:00",
        id: "1",
        lesson: "Lesson ABC",
        modified: "2017-01-15",
        modified_user: "admin",
        room: "room1",
        staff: "Amanda Jeremy",
        start_time: "9:00:00",
        timetable: "class timetable"
    },
    {
        "class": "Class ABC",
        created: "2017-01-15",
        created_user: "admin",
        day_of_week: "monday",
        education_grade_subject: "Chemistry",
        end_time: "10:00:00",
        id: "2",
        lesson: "Lesson XYZ",
        modified: "2017-01-15",
        modified_user: "admin",
        room: "room2",
        staff: "Amanda Jeremy",
        start_time: "9:30:00",
        timetable: "class timetable"
    }
]

const formatRoom = 
  R.pipe(R.last, R.prepend("0"), R.takeLast(2), R.join(""), (n) => `Room ${n}`)

const makeClass = (classSuffix) =>
  R.pipe(R.prop('lesson'), R.split(" "), R.last, (name) => `lesson${name}${classSuffix}`,)

const spec = {
  class: R.prop('room'),
  uid: R.prop('id'),
  title: {
    field: R.always('lesson'),
    text: R.prop('lesson'),
    class: makeClass("-title"),
  },
  content: [
    {
      field: R.always('education_grade_subject'),
      text: R.prop('education_grade_subject'),
      class: makeClass("-subject-class"),
    },
    {
      field: R.always('staff'),
      text: R.prop('staff'),
      class: makeClass("-teacher-class"),
    },
    {
      field: R.always('room'),
      text: R.pipe(R.prop('room'), formatRoom),
      class: makeClass("-room-class"),
    },
  ],
}

const formatTime =
  R.dropLast(3)

const transformData =
  R.pipe(
    R.groupBy(R.prop('start_time')),
    R.map(R.groupBy(R.prop('day_of_week'))),
    R.map(R.map(R.map(R.applySpec(spec)))),
    R.toPairs,
    R.map(([start_time, groupsByDay]) =>
      R.assoc('time', formatTime(start_time), groupsByDay)),
  )

console.log(transformData(ROWDATA))

<script src="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6e7d71787d5c2c322e29322c">[email protected]</a>/dist/ramda.min.js"></script>

Answer 6

Here's the resolution.

Apologies for using Ramda.js, but leveraging Ramda.js significantly reduced the volume of code required.

const ROWDATA = [
    {
        "class": "Class ABC",
        created: "2017-01-15",
        created_user: "admin",
        day_of_week: "monday",
        education_grade_subject: "Physics",
        end_time: "9:30:00",
        id: "1",
        lesson: "Lesson ABC",
        modified: "2017-01-15",
        modified_user: "admin",
        room: "room1",
        staff: "Amanda Jeremy",
        start_time: "9:00:00",
        timetable: "class timetable"
    },
    {
        "class": "Class ABC",
        created: "2017-01-15",
        created_user: "admin",
        day_of_week: "monday",
        education_grade_subject: "Chemistry",
        end_time: "10:00:00",
        id: "2",
        lesson: "Lesson XYZ",
        modified: "2017-01-15",
        modified_user: "admin",
        room: "room2",
        staff: "Amanda Jeremy",
        start_time: "9:30:00",
        timetable: "class timetable"
    }
]

const formatRoom = 
  R.pipe(R.last, R.prepend("0"), R.takeLast(2), R.join(""), (n) => `Room ${n}`)

const makeClass = (classSuffix) =>
  R.pipe(R.prop('lesson'), R.split(" "), R.last, (name) => `lesson${name}${classSuffix}`,)

const spec = {
  class: R.prop('room'),
  uid: R.prop('id'),
  title: {
    field: R.always('lesson'),
    text: R.prop('lesson'),
    class: makeClass("-title"),
  },
  content: [
    {
      field: R.always('education_grade_subject'),
      text: R.prop('education_grade_subject'),
      class: makeClass("-subject-class"),
    },
    {
      field: R.always('staff'),
      text: R.prop('staff'),
      class: makeClass("-teacher-class"),
    },
    {
      field: R.always('room'),
      text: R.pipe(R.prop('room'), formatRoom),
      class: makeClass("-room-class"),
    },
  ],
}

const formatTime =
  R.dropLast(3)

const transformData =
  R.pipe(
    R.groupBy(R.prop('start_time')),
    R.map(R.groupBy(R.prop('day_of_week'))),
    R.map(R.map(R.map(R.applySpec(spec)))),
    R.toPairs,
    R.map(([start_time, groupsByDay]) =>
      R.assoc('time', formatTime(start_time), groupsByDay)),
  )

console.log(transformData(ROWDATA))

<script src="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6e7d71787d5c2c322e29322c">[email protected]</a>/dist/ramda.min.js"></script>

Changing the format of a data structure using JavaScript/TypeScript

Answer №1

Answer №2

Answer №3

Here's the resolution.

Similar questions

using v-model in multiple components

Developing a method to handle HTTP errors when utilizing the fetch method to retrieve data from an API endpoint

"Encountering issues with the React.js random name generator, resulting in either undefined outputs

Unconventional login processes showcased in Redux-Saga's documentation

Angular - Show user information on homepage post authentication

Is it possible for issues to arise when serving a web app using the "Globals" module in the Mean Stack?

Creating a dynamic cascading dropdown list with Vue.js: Step-by-step guide

AngularJS's support for html5mode on GitHub pages is now available

How can React Native on Android open another app?

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

How to pause a loop temporarily before proceeding with the next iteration

I am unable to utilize autocomplete with types that are automatically generated by Prisma

Easy-to-use blog featuring Next.js 13 and app router - MDX or other options available

What is the best way to navigate to the next video in my YouTube API search results with Vue.js?

Sending a Post Request from Express to MongoDB

Adding together separate numbers within an array using JavaScript

Tips for performing an integration test on a material UI <Slider /> component using either userEvent or fireEvent

There seems to be an issue with the hidden field value not being properly set within the

Here's a guide on using a button to toggle the display of password value in Angular, allowing users to easily hide

Which is better: storing an element in a variable or selecting it every time it's needed for efficiency?