Soy un estudiante que crea una aplicación web simple para interactuar con la API de Google Books. Tengo una palabra aleatoria que se genera como el parámetro de búsqueda de Google Books, que regresa en JSON correctamente.
El problema es que algunos libros no tienen un parámetro "Autor"/"Descripción"/"Imagen" para devolver. Para Author/Desc, he tenido en cuenta esto fácilmente usando un ternario, pero el ternario no está funcionando tan bien para una fuente de imagen.
Lo que estoy tratando de lograr: SI la consulta de Google Books tiene un valor para Imagen, devuelva esa imagen: DE LO CONTRARIO, devuelva un valor predeterminado de mi elección, en este caso 'http://clipart-library.com/newimages/clip -libros-de-arte-15.png'. Preferiría no editar el HTML para lograr esto.
Quizás haya una mejor manera de hacer esto que a través del ternario. ¿Alguien puede aconsejar?
const testBookImg2 es el ternario de foco.
fetch (randomWord) .then (res => res.json()) .then (obj => { console.log(obj) fetch (gbooks + obj[0]) .then (res => res.json()) .then (obj2 => { const testdesc1 = obj2.items[0].volumeInfo.description const testdesc2 = typeof(testdesc1) !== 'undefined' ? testdesc1 : 'No Description Provided' const testAuthor1 = obj2.items[0].volumeInfo.authors const testAuthor2 = typeof(testAuthor1) !== 'undefined' ? testAuthor1 : 'No Author' selectedBookDescription.innerText = testdesc2 selectedBookAuthor.innerText = testAuthor2 selectedBookTitle.innerText = obj2.items[0].volumeInfo.title const testBookImg1 = obj2.items[0].volumeInfo.imageLinks.thumbnail const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png' const testBookImg2 = typeof(testBookImg1) !== 'undefined' ? testBookImg1 : `${testBookLink}` selectedBookImage.src = testBookImg2 }) })El problema es que no existe la propiedad imageLinks , por lo que obtiene un error al intentar leer la propiedad de thumbnail de undefined .
Utilice el operador de encadenamiento opcional para evitar estos errores. Asignará el valor de la propiedad si existe, o undefined si no existe o no existe ninguna de las propiedades intermedias.
const testBookImg1 = obj2.items[0]?.volumeInfo?.imageLinks?.thumbnail; const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png'; const testBookImg2 = typeof testBookImg1 !== 'undefined' ? testBookImg1 : || testBookLink; No hay necesidad de usar un literal de plantilla alrededor de testBookLink , ya que ya es una cadena.
Esto configurará testBookImg1 como undefined si alguna de las propiedades intermedias no existe.
Hay un par de formas de manejar claves opcionales en objetos:
const obj = { key1: "val1", } const keyIn = (key, obj) => key in obj const hasOwnProperty = (key, obj) => obj.hasOwnProperty(key) console.log('key1 in obj', keyIn('key1', obj)) console.log('key2 in obj', keyIn('key2', obj)) console.log('key1 hasOwnProperty with obj', hasOwnProperty('key1', obj)) console.log('key2 hasOwnProperty with obj', hasOwnProperty('key2', obj)) Además, podría usar el nullish coalescing operator - ?? :
(function() { const testBookImg1 = 'valid string' const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png' const testBookImg2 = testBookImg1 ?? testBookLink console.log('testBookImg2', testBookImg2) })(); (function() { const testBookImg1 = undefined const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png' const testBookImg2 = testBookImg1 ?? testBookLink console.log('testBookImg2', testBookImg2) })(); // mock object const obj2 = { items: [{ volumeInfo: { imageLinks: { thumbnail: 'valid thumbnail src' } } }] } const testBookImg1 = obj2?.items[0]?.volumeInfo?.imageLinks?.thumbnail const testBookLink = 'http://clipart-library.com/newimages/clip-art-books-15.png' const testBookImg2 = testBookImg1 ?? testBookLink console.log('testBookImg2', testBookImg2) // the same, just a suffix added, so it doesn't crash: const obj2_undefined = { items: [{ volumeInfo: {} }] } const testBookImg1_undefined = obj2_undefined?.items[0]?.volumeInfo?.imageLinks?.thumbnail const testBookLink_undefined = 'http://clipart-library.com/newimages/clip-art-books-15.png' const testBookImg2_undefined = testBookImg1_undefined ?? testBookLink_undefined console.log('testBookImg2_undefined', testBookImg2_undefined)