Playground: Obtén una lista de películas

alguien mas hace ctrl + s a cada rato?

Tengo la extraña sensación de que Juan dc está detrás de este ejercicio xD

Para recordar, en este caso el import se hace con { } porque no se hizo el export default getData en el archivo api.js. Si se hubiera hecho, simplemente sería,
import getData from “./api.js”;

import { getData } from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

Por si alguien lo necesita saber, el ejercicio dice que el código debe escribirse dentro de la función (// Tu código aquí 👈) pero no es obligatorio, deben escribir el import al principio del ejercicio. Deben bajar la función y en una línea superior hacer el import que se necesita.

<import { getData } from "./api.js";

export function solution() {
  return getData().then(list => list);
}> 

A veces no dejaba dar a ‘correr pruebas’ pero se logro.

import getData from "./api.js" 

export function solution() {
  return getData();
}

Esta buenisima esto, ahora bien la comunidad ayuda mucho con sus aporte, pero creó que si van a poner ejemplo deberian basarse con los videos, en los comentarios uno aprende mas cosa y esta buenisimo pero esa forma de exportar y async no recuerdo que estuvieran en las clases previas

Esta re bueno 100/10 ya era hora de implementar esto ojala hagan muchos mas ejercicios de este tipo que hacen falta

Para importar funciones se utilizan {} despues del import.
Ex: import {miFunc} from ‘./file.js’

Me hace sentir como que estoy respondiendo preguntas de una empresa para un empleo de progra… 😃

Mi solucion: al archivo api.js le agrego la parte del export

mi archivo exercise queda asi:

si no le agrego el export default a mi archivo api.js cuando importe la funcion debo poenrla dentro de {} asi
import { getData} from “./api.js”;

Una solucion mas entedible con la sintaxis del las clases anteriores.

// main.js
import { getData } from "./api.js";
export function solution() {

  const solucion = getData()
    .then((response) => response)
    .catch();
  return solucion;
}

Ok, este es el código que resuelve esto, pero pq

import { getData } from "./api.js"; //un import, las llaves son importantes
export async function solution() { //async pq es asincronico¿?
  return await getData(); //await pq hay q esperar ??????
}

Esta fue mi solución.

api.js

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

getData()
    .then(response => console.log(response))
    .catch(err => console.log(err));

export default getData;

exercise.js

import getData from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

solution();

Mi solución…no entiendo porque agregan async si se está usando promesas 😜.

Aunque sin then ni catch también compila. Ni idea pero lo hace.

api.js

export default async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

exercise.js

import getData from './api.js';
export function solution() {
  return getData().then(res => res) // Tu código aquí 👈
}

Mi solución al reto:

import { getData } from "./api.js"
export function solution() {
  return getData();
};

me salte el async await xd

import { getData } from './api.js'

export async function solution() {
  return await getData()
}

export async function solution() {
  const response = await getData();
  return response;
}

import { getData } from "./api.js";

export function solution() {
  return getData()
}

// Importa la función getData desde api.js
import { getData } from './api';

export async function solution() {
  try {
    // Llama a la función asíncrona getData
    const data = await getData();

    // Devuelve los resultados obtenidos
    return data;
  } catch (error) {
    // Maneja cualquier error que pueda ocurrir al llamar a getData
    console.error('Error al obtener datos:', error);
    throw error; // Puedes decidir lanzar el error nuevamente o manejarlo de otra manera
  }
}

// Importa la función getData desde api.js
import { getData } from ‘./api’;

export async function solution() {
try {
// Llama a la función asíncrona getData
const data = await getData();

// Devuelve los resultados obtenidos
return data;

} catch (error) {
// Maneja cualquier error que pueda ocurrir al llamar a getData
console.error(‘Error al obtener datos:’, error);
throw error; // Puedes decidir lanzar el error nuevamente o manejarlo de otra manera
}
}

reto solucionado en el archivo api.js se agrega

export default getData

para que en el archivo exercise.js quede :

import getData from './api.js'

export function solution() {
  // Tu código aquí 👈
  return getData()
}```

comparto mi solucion a continuacion ,ya que la veo diferente a mis compañeros pero tambien funciona ,…
.
…
…

import {getData} from "./api.js"

export function solution() {
  // Tu código aquí 👈
  const response = getData()
    .then((response) => { return response })

    return response
}

import { getData } from "./api.js";

export function solution() {
  
  return getData().then();
}

(L)

Por si llegan a encontrar nombres de funciones poco descriptivos y nada claros pero que necesitan en algún nuevo modulo, recuerden que al importar pueden cambiarle el nombre.

import alias from 'old-module';
import {default as alias} from 'old-module';

import {getData} from "./api.js"

export async function solution() {
  const data = await getData()
  return data
}

Buenas comunidad, Me podrian aportar su conocimiento creo que entedi de esta manera el ejercicio, Agradezco su ayuda corrigiendome Muchas Gracias.

api.js

const solution = () => {
console.log(movie: "El despertar de los michis", year: 2021, protagonist: "Mr. Michi");

console.log(`movie: "101 Michis",
 year: 2019,
 protagonist: "Tommy Michiguire"`)

};

export default solution;

exercise.js

import solution from “./api.js”;

solution();

  import getData from './module.js'

async function solution() {
    console.log(await getData())   
  }
  
solution();
  

import getData from ‘./api.js’;

export function solution() {
return getData();
}

solution();

Mi solución 😃

import { getData } from './api'

export function solution() {
  let response = getData()
    .then(res => res)
    .catch(err => err)
  return response
}

Utilizando async await

import { getData } from "./api";

export async function solution() {
  const resultado = await getData()
  return resultado;
}

import { getData } from './api.js'
export const solution = () => getData().then((res) => res)

Usé async await para ver si había entendido algo de promesas y asincronía y funcionó a la primera

import getData from "./api.js";
export async function solution() {
  try {
    const sol = await getData();
    return sol
  } catch {};
};

solution();

movies.json

[{
    "movie": "El despertar de los michis",
    "year": "2021",
    "Protagonist": "Mr. Michi"

},
{
    "movie": "101 Michis",
    "year": "2019",
    "Protagonist": "Tommy Michiguire"
}
]

api.js

import { readFileSync } from "fs";

export async function getData() {
  const file = readFileSync("./movies.json", "utf-8");
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log(file));
    });
  }, 1000);
}

exercise.js

import { getData } from "./api.mjs";

export function solution(){
    return getData();
    
}

solution();

Lo resolvi, pero en vez de pasar una lista lo imprimi jaja! hay que leer bien.

Lo entendi asi, use “await” por que es una funcion asincrona, sino no hubiese funcionado, a tener en cuenta.

import { getData } from "./api.js";

export async function solution() {
  const data = await getData();
  return data;
}

mi humilde aportación

import { getData } from "./api.js";
export function solution() {
  return getData()
}

solution()
  .then(response => console.log(response)) 

import { getData } from './api'

export const solution = async () => await getData();

api.js

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

export default getData; 

exercise.js

import getData from "./api.js";

export function solution() {
  return getData();
}

solution();

Esta fue la solución que realice:

import getData from "./api.js";

export function solution() {

  return getData()
}

Recuerden importar fuera de solution();

Hola, así fue como pude resolver el reto:

import { getData } from "./api.js";
export function solution() {
  // Tu código aquí 👈
  return getData()
}

import { getData } from './api.js';

function solution() {
    // Tu código aquí
    return getData()
        .then(response => response);
}
console.log(await solution())

Mi solución:

import { getData } from "./api.js"

export function solution() {
  return getData().then(res => res)
}

import getData from "./api.js";
export function solution() {
  // Tu código aquí 👈
  return getData();
  
}

Bueno así fue mi solución

esta es la hoja api.js

<export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

export default getData;> 

esta es la hoja exercise.js

<import getData from "./api.js"
export function solution() {
  // Tu código aquí 👈
  return getData();
}> 

Hola a todos, estuve viendo varios comentarios y creo que no es necesario volverse loco usando cosas que aún no se han visto como el async/await y los { }.

La solución se puede realizar con cosas de la clase anterior. Solo hay que agregar el default al export en api.js y la linea del import en exercise.js. Nada de esto es ajeno a la clase anterior. Saludos!

//"./api.js"
export default getData;

//"./exercise.js"
import getData from "./api.js";
export function solution() {
  return getData();
}

Hola a todos 😃, en mi caso me funciono el codigo sin tener que poner el .then, que uso Mauricio Poveda.

<import {getData} from "./api.js";

export function solution() {
  // Tu código aquí👈
  
  return getData()> 

Eso de:

import { getData } from "./api";

con llaves { } no lo dijo Oscar, creo que siempre omite cosas importantes, que a la hora de resolver los retos son cosas determinantes.

import { getData } from "./api.js";

export function solution() {
  
  return getData();
  
}

Yo solo aplique en el archivo api.js

export default getData;

y en el archivo exercise.js

import getData from "./api.js"
export function solution() {
  return getData();
}

Bueno, como manera de prueba hice esto y funciono jaja. Lo comparto por si acaso.

1. En el archivo api.js solo teniendo la respuesta:

const getData = () => {
  return [
    {
      movie: "El despertar de los michis",
      protagonist: "Mr. Michi",
      year: 2021,
    },
    { movie: "101 Michis", protagonist: "Tommy Michiguire", year: 2019 }
  ];
};

export default getData;

exercise.js:

import getData from "./api.js";

export function solution() {
  const anotherFuncion = () => {
    return new Promise((resolve, reject) => {
      if (getData()) {
        resolve(getData());
      } else {
        reject("Whoooops!");
      }
    });
  };

  return anotherFuncion()
    .then((response) => {
      console.log(response);
      response;
    })
    .catch((error) => console.error(error));
}

solution();

le coloque el console.log para que vean que la respuesta es correcta xD.

Ya para el ejercicio como tal, utilizando el api.js que dan solo hice esto (agregue nuevamente un console.log solo para confirmar la respuesta):

import { getData } from "./api.js";

export function solution() {
  return getData().then((response) => {
    console.log(response);
    response;
  });
}

solution();

No se si lo diga, pero agregue {} para poder colocar varias cosas y no solo la instruccion response.

Mi aporte a la comunidad sin then… 😃

import {getData}from "./api.js"
export async function solution() {
// Tu código aquí 👈
return await getData()

}

Poco diferente pero el try catch - await ayuda a entender mucho más el código

import { getData } from "./api.js"

export async function solution() {
  try {
    const data = await getData()
    return data
  } catch (e) {
    console.log(e)
  }
}

import {getData} from "./api.js";
export function solution() {
  return getData().then()
}

Explicación:

1. Los corchetes en {getData} son para devolver multiples funciones o constantes. Sin los corchetes, no podriamos accesder a las funciones que tiene dentro.
   https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
2. return getData().then() No es necesario que argumentos en la funcion then()
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#chaining

Super buenos los playgrounds, nos hace practicar lo que vamos aprendiendo y probando errores

Solution

import {getData} from "./api.js"
export function solution() {
  return getData().then(response => response);
}

Diablos, se me olvido poner el return. Lo resolví al segundo intento.

import {getData} from './api.js'
export function solution() {
  return getData().then(data => data);
}

Bastaba con agregar la sentencia de export en el archivo de la api 😄

otra solución más corta y con arrow function es:

import { getData } from './api'

export const solution =() => getData()

mi solución

import { getData } from './api'
export function solution() {
  const datos = getData()
  return datos
}

import { getData } from "./api.js";
export function solution() {
  // Tu código aquí 👈
  return getData();
}

esta clase no me funcioo 😦

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

export default getData;

import getData from './api.js';

export function solution() {
    return getData()
    .then(res => res)
    .catch(err => err);
}

import { getData } from "./api.js"
export function solution() {
  // Tu código aquí 👈
  return getData();
}

Me ayude con los comentarios de los compañeros, pero si considero que de no ser por los aportes no lo hubiera logrado solo con la clase

import { getData } from "./api";

export function solution() {
  return getData()
}

Estoy muy novato, no entendi esta parte, lo logre solucionar gracias a mis compannieros pero por mas que analize su codigo tenia un par de cosas que hasta el momemnto no hemos visto.

Con async/await se veria de esta forma:

import { getData } from './api.js';

export async function solution() {
  return await getData();
}

comparto mi codigo

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}
export default getData;

import getData from "./api.js";

export function solution() {
  return getData();
}

no le había colocado las { } brackets para importar el getData y ya solo me quedaba un corazón de vida, literal dije, se las voy a colocar y si no funciona, me muero jajaja quedo sin vidas. y funcionó!!

<api.js> 
export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

export default getData;

<exercise.js> 
import getData from "./api.js";

function solution() {
    return getData()
    .then(response => console.log(response)) // cuando entre en el resolve 
    .catch(err => console.log(err))
    
}

solution();

Este es mi aporte de resolución del ejercicio;

<import {getData} from "./api.js"

export function solution(){
  return getData();
};> 

import {getData} from "./api.js";

export async function solution() {
  const response = await getData()
  return response
}

solution();

import { getData } from "./api.js";
export function solution() {
  
  return getData()
}
solution()

api.js
<export default getData;> 

exercise.js
<import { getData } from "./api.js";
export function solution() {
  return getData().then(movie => movie);
}> 

import {getData} from "./api.js"
export function solution() {
  return getData();
};

Hola!, aqui dejo una forma corta de resolver este problema 😃

import { getData } from './api.js'

export const solution = async () => await getData()

Espero alguien entienda el chiste 🤣:

export function solution() {
  const arr = [{
    movie: "El despertar de los michis",
    year: 2021,
    protagonist: "Mr. Michi"
  }, {
    movie: "101 Michis",
    year: 2019,
    protagonist: "Tommy Michiguire"
    }];
  return arr;
}