Estoy tratando de generar el nombre de los jugadores desde una matriz JSON usando fetch y simplemente devolviéndolo donde lo llamo, puedo insertar el retorno en elementos html.
La consola registra los resultados que quiero perfectamente pero el retorno, devuelve indefinido en el elemento.
Ejemplo de API JSON:
{ "PlayerID": 10000439, "Jersey": 8, "Position": "RF", "FirstName": "Nick", "LastName": "Castellanos" }HTML
<div id="scoreboard"> <div class="home">TEAM1<span class="runs"></span>0</div> <div class="away">TEAM2<span class="runs"></span>0</div> </div> <div class="batting"> Batting: <span id="batterPlayerName"> Player Name </span> </div> <div class="pitching"> Pitching: <span id="pitcherPlayerName"> Player Name </span> </div>JS
function PlayerName(id) { var url = `https://apiurl/Player/${id}`; fetch(url) .then(response => response.json()) .then(data => { console.log(`${data.FirstName} ${data.LastName}`) return data.FirstName + ' ' + data.LastName; }) } var curBatter = document.querySelector('#batterPlayerName'); var curPitcher = document.querySelector('#pitcherPlayerName'); curBatter.innerHTML = PlayerName('10000439'); curPitcher.innerHTML = PlayerName('10000526');consola: Nick Castellanos PlayerName div: Bateo: indefinido
Está intentando establecer el valor de PlayerName antes de que se resuelva la búsqueda.
Si devuelve la promesa de su función PlayerName, podrá configurar el código interno una vez que se resuelva la promesa.
function PlayerName(id) { var url = `https://apiurl/Player/${id}`; return fetch(url) .then(response => response.json()) .then(data => { console.log(`${data.FirstName} ${data.LastName}`) return data.FirstName + ' ' + data.LastName; }) } PlayerName('10000439').then(player => { var nameDiv = document.querySelector('#PlayerName') nameDiv.innerHTML = `Batting: ${player}`; })Alternativamente, puede envolver toda la función para ejecutarla de forma asincrónica.
async function PlayerName(id) { var url = `https://apiurl/Player/${id}`; return fetch(url) .then(response => response.json()) .then(data => { console.log(`${data.FirstName} ${data.LastName}`) return data.FirstName + ' ' + data.LastName; }) } var curBatter = document.querySelector('#batterPlayerName'); var curPitcher = document.querySelector('#pitcherPlayerName'); (async () => { curBatter.innerHTML = await PlayerName('10000439'); curPitcher.innerHTML = await PlayerName('10000526'); })();Debe declarar el selector de HTML al JSON correspondiente