Hola, tengo una fila de datos como la siguiente:
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" }, ..... ];Básicamente es una estructura de datos de fila para una tabla en mi sitio web. Los datos de fila que recuperé de mi backend. Ahora necesito convertir/transformar estos datos a otro formato para mi sitio web. El nuevo formato debe tener el siguiente formato:
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" } ] }, ....Los segundos datos o transformados puramente en base a los primeros datos. ¿Cómo puedo lograr esto chicos? Muy nuevo en JavaScript. ¿Alguna idea chicos? Gracias por adelantado
Eliminé algunos de los bits mecanografiados aquí porque no son realmente relevantes, ya que creo que el problema principal es la lógica para analizar su variable ROWDATA . Eche un vistazo al código a continuación, he incluido algunos comentarios para explicar cómo funciona.
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 ={}; // keep track of the time that we have seen ROWDATA.forEach(e => { // object to be inserted to the day array in each of the object containing // time property const newClass = { class: e.class // ... fill in the rest of info here... } // if time does not exist in map, // create new entry 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 { // time already exist, find that object with corresponding time // and push the new class to the respective day 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)No estoy muy seguro de qué partes de esto necesita para ser dinámico, ya que me parece que está eligiendo a mano ciertas propiedades y nombrando arbitrariamente algunas cosas en función de un patrón obvio.
Pero de todos modos, si desea ejecutar su primer conjunto de datos a través de una función para obtener el segundo resultado, puede hacer esto:
let newdata = 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(newdata);enlace: https://es6console.com/j219msmv/
Lo siento, estoy usando Ramda.js, pero Ramda.js me ayudó a reducir la cantidad de código.
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/ramda@0.25.0/dist/ramda.min.js"></script>