El patrón modelo vista controlador (MVC) se rige por la separación de un proyecto en distintos archivos con responsabilidades diferentes. Allí, el controlador define los datos con los que trabajará el proyecto. Aunque estos pueden provenir de distintas fuentes o de una misma fuente cambiante, el resultado en el navegador debe ser el mismo. Por ello, en este post te enseñaremos cómo transformar modelo de datos en JavaScript para preparar tu proyecto para cambios en la fuente de los datos.
¿Por qué transformar modelo de datos en JavaScript?
Transformar modelo de datos en JavaScript es una acción necesaria para preparar proyectos al cambio de (o en) la fuente de datos. Se refiere a un proceso en el que se prepara nuestro modelo de datos para recibir objetos de distintas fuentes y transformarlos en el mismo tipo de dato.
Te ponemos un ejemplo. Supongamos que tenemos un proyecto web que lista una serie de objetos con distintas propiedades. Esta serie de objetos puede obtenerse de dos fuentes: una en la que los objetos tienen propiedades como pseudo, handle, content, verified, date, reposts, likes, replies y avatar, y otra en la que los objetos tan solo tienen las propiedades content, userId, updatedAt y id.
El proceso de transformar modelo de datos en JavaScript se refiere a hacer que los datos, provengan de donde provengan, puedan ser leídos por la vista y el controlador como si fueran exactamente iguales. Esto nos permite evitar que el modelo se acople a la fuente de datos, haciéndolo más independiente. Para ello, se deberá escribir una lógica de transformación dentro del archivo que se encarga de recibir la fuente. A continuación, te enseñamos exactamente cómo escribir esta lógica siguiendo nuestro ejemplo.
¿Cómo transformar modelo de datos en JavaScript?
Para transformar modelo de datos en JavaScript debemos crear un especie de modelo intermedio que se abstraiga de la lógica de datos de la fuente o API y cree su propia lógica. Este modelo intermedio puede crearse dentro del servicio actual del proyecto, no hace falta crear un archivo nuevo.
Ahora, el modelo intermedio que creemos deberá devolver siempre las variables con las que está trabajando la vista. Es decir, si nuestro navegador procesa una propiedad updatedAt, esta deberá ser la que tiene el dato, sin importar si llega como date o como uploaded, etc. Esto garantizará que la aplicación pueda funcionar a pesar de un cambio de proveedor de datos y no devuelva puros elementos undefined.
Hagamos un ejercicio con nuestro ejemplo. Actualmente, nuestro servicio devuelve la variable posts, que se refiere a los datos obtenidos. Ahora, devolverá el resultado de un método que llamaremos transformPosts, que recibirá los posts originales.
const transformedPosts = transformPosts (posts);
return transformedPosts;
El método transformedPosts se encargará de transformar modelo de datos en JavaScript. Para ello, usará el método map en JavaScript para transformar todos los objetos del array original. Dentro de este método map, definiremos las propiedades que recibimos y a las que se igualan.
A continuación, te mostramos cómo hacemos la primera definición de estas propiedades, en las que no transformamos nada, pues mantenemos los nombres de la segunda fuente:
transformedPosts (posts) {
posts.map (post => {
const transformedPost = {
content: post.content,
userId: post.userId,
updatedAt: post.updatedAt,
id: post.id
}
})
},
Ahora, podemos agregar las propiedades de la primera fuente de datos a este contrato de variables. Para ello, usamos el condicional if, generando otra situación para las propiedades que no existen dentro de transformedPost.
if (post.pseudo) {
transformedPost.pseudo = post.pseudo
}
Si quieres conocer cómo ejecutar una lógica como esta pero con elementos de tipo imagen, te recomendamos leer nuestro post sobre insertar imagen por defecto en JavaScript.
Ahora, para las propiedades que representan el mismo contenido con nombres diferentes basta con agregar un operador or al objeto transformedPost. A continuación, te mostramos las líneas de código finales de la función transformPosts:
transformedPosts (posts) {
return posts.map ((post => {
const transformedPost = {
content: post.content || post.body,
userId: post.userId,
updatedAt: post.updatedAt,
id: post.id,
userImage: post.avatar || ‘http://…’,
};
if (post.pseudo) {
transformedPost.pseudo = post.pseudo;
}
return transformedPost;
¿Cuál es el siguiente paso?
Ahora que sabes exactamente por qué y cómo transformar modelo de datos en JavaScript, te has acercado a dominar este lenguaje de programación. Sin embargo, ¡todavía queda mucho por aprender! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con lenguajes como JavaScript, HTML y CSS. ¿A qué estás esperando para dar el siguiente paso en tu aprendizaje? ¡Inscríbete ya y triunfa en el sector IT!
