He estado tratando de hacer un programa que escupe las definiciones de una lista de palabras para un proyecto. Estoy usando https://dictionaryapi.dev/ . Nunca antes había trabajado con API web, así que puedo obtener ayuda con esto.
var data = $.getJSON("https://api.dictionaryapi.dev/api/v2/entries/en/hello") y luego document.getElementById('output').innerHTML = data.meanings[1].definition pero no funciona. Dice que no puede encontrar los significados.
Puede usar flatMap para recuperar solo las definiciones de la respuesta:
const DICTIONARY_API_BASE_URL = 'https://api.dictionaryapi.dev/api/v2/entries/en/'; const DEFINITIONS_DIV = document.getElementById('definitions'); const fetchWordDefinitions = async word => { console.log(`Making request for definitions of ${word}...`); const response = await fetch(DICTIONARY_API_BASE_URL + word); const json = await response.json(); return json[0].meanings .flatMap(m => m.definitions) .flatMap(d => d.definition); }; const getWordDefinitions = () => { const word = document.getElementById('word').value; if (word == null || word == '') { return alert('Error: You must enter a word to fetch'); } DEFINITIONS_DIV.innerHTML = ''; fetchWordDefinitions(word) .then(defintions => { defintions.forEach(d => { DEFINITIONS_DIV.innerHTML += `<p>${d}</p>`; }); }) .catch(_ => { DEFINITIONS_DIV.innerHTML += `<p>Error: Could not retrive any defintions for ${word}.</p>`; }); }; * { font-family: sans-serif } <!DOCTYPE html> <html> <body> <h1>Fetch the definitions for a word!</h1> <input type="text" id="word" name="word"> <input type="button" value="Fetch" onClick="getWordDefinitions()"> <div id="definitions"></div> </body> </html>