Bienvenido! Este es un vídeo avanzado del CURSO DE VELO EN WIX, aprenderás a integrar una API en Wix. Una serie de videos que te ayudará a entender Velo de Cero a Intermedio. No olvides subscribirte y comentar alguna pregunta!
CODIGO
// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction import { fetch } from 'wix-fetch'; const url = "https://randomuser.me/api/?page=1&results=5"; const urlNoPages = "https://randomuser.me/api/"; $w.onReady(function () { getDataAPI(url).then((data) => { const dataWithIds = data.results.map((item, index) => { item._id = index + "test"; // console.log('item', item); return item }); updateRepeater(dataWithIds); }) $w("#btnFemale").onClick(() => { const urlFemale = url + "&gender=female"; getDataAPI(urlFemale).then((res) => { const dataWithIds = res.results.map((item, index) => { item._id = index + "test"; return item }); updateRepeater(dataWithIds); }) }) $w("#btnMale").onClick(() => { const urlFemale = url + "&gender=male"; getDataAPI(urlFemale).then((res) => { const dataWithIds = res.results.map((item, index) => { item._id = index + "test"; return item }); updateRepeater(dataWithIds); }) }) $w("#btnFR").onClick(() => { const urlFemale = url + "&nat=FR"; getDataAPI(urlFemale).then((res) => { const dataWithIds = res.results.map((item, index) => { item._id = index + "test"; return item }); updateRepeater(dataWithIds); }) }) $w("#btnNext").onClick(() => { const urlFemale = urlNoPages + "?page=2&results=5"; getDataAPI(urlFemale).then((res) => { const dataWithIds = res.results.map((item, index) => { item._id = index + "test"; return item }); updateRepeater(dataWithIds); }) }) }) function updateRepeater(data) { $w("#repeater6").data = data; $w("#repeater6").onItemReady(($item, itemData, index) => { console.log('item data', itemData); $item("#picture").src = itemData.picture.large; $item("#name").text = itemData.name.first; $item("#country").text = itemData.location.country; }) } async function getDataAPI(url) { return await fetch(url, { "method": "GET", "headers": { "Content-Type": 'application/json' } }) .then((httpResponse) => { if (httpResponse.ok) { return httpResponse.json(); } else { return Promise.reject("Fetch did not succeed"); } }) .then((json) => json) .catch(err => console.log(err)) }