Estoy tratando de obtener información de una API donde da el nombre, el nombre del autor, el editor y el primer año de publicación del libro. pero a veces falta el primer año de publicación. Quiero mostrar esta información en una página. Estoy escribiendo este fragmento de código ---
const searchResultShow = data => { parentDiv = document.getElementById('result-details'); parentDiv.innerText = ""; data.docs.forEach(key=>{ bookName = key.title; authorname = key.author_name[0]; publisher = key.publisher[0]; newElem = document.createElement('div') newElem.classList.add('col') if ('first_publish_year' in key){ firstPublish = key.first_publish_year; newElem.innerHTML = ` <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4> <h4>First Publish Year: ${firstPublish}</h4> ` } else { newElem.innerHTML = ` <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4> ` } parentDiv.appendChild(newElem); })Como puede ver, esto no es eficiente, estoy escribiendo newElem.innerHTML dos veces. Y si faltan algunos otros parámetros, tengo que repetir esto una y otra vez. ¿Cuál podría ser una solución fácil para deshacerse de esta situación repetitiva?
La forma más fácil es probablemente separar las líneas y luego combinarlas:
const firstPublishHTML = ('first_publish_year' in key) ? `<h4>First Publish Year: ${key.first_publish_year}</h4>` : '' ... newElem.innerHTML = `<h4>Name: ${bookName}</h4> ... ${firstPublishHTML}...`Básicamente, si el elemento está presente, su variable es una línea HTML válida, si no lo está, es una cadena vacía
Puede intentar agregar/concatenar cadenas como esta:
Como parece que no se cambiará parte del código:
`newElem.innerHTML` = <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4>Puedes hacer lo siguiente:
newElem.innerHTML = ` <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4> ` if ('first_publish_year' in key){ firstPublish = key.first_publish_year; newElem.innerHTML += `<h4>First Publish Year: ${firstPublish}</h4>` }Por lo general, para este tipo de cosas, intentaría usar una verificación nula que resida en línea en lugar de una instrucción envolvente. Eso lo mantendrá SECO y le permitirá agregar una función para resolver los datos más tarde si alguna vez obtiene esa opción. De esta manera, puede seguir agregando condicionales a su plantilla y construirla lentamente.
const searchResultShow = data => { parentDiv = document.getElementById('result-details'); parentDiv.innerText = ""; data.docs.forEach(key=>{ bookName = key.title; authorname = key.author_name[0]; publisher = key.publisher[0]; newElem = document.createElement('div') newElem.classList.add('col') newElem.innerHTML = ` <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4> ` newElem.innerHTML += (('first_publish_year' in key) ? `<h4>First Publish Year: ${key.first_publish_year}</h4>` : ``); } parentDiv.appendChild(newElem); })Alternativamente, dado que esto se analizará, puede tener una cadena en la que construir y luego hacer una sola llamada a innerHTML con esa cadena:
const searchResultShow = data => { parentDiv = document.getElementById('result-details'); parentDiv.innerText = ""; data.docs.forEach(key=>{ let innerHTMLString = ""; bookName = key.title; authorname = key.author_name[0]; publisher = key.publisher[0]; newElem = document.createElement('div') newElem.classList.add('col') innerHTMLString += ` <h4>Name: ${bookName}</h3> <h4>Author Name: ${authorname}</h4> <h4>Publisher: ${publisher}</h4> ` innerHTMLString += (('first_publish_year' in key) ? `<h4>First Publish Year: ${key.first_publish_year}</h4>` : ``); newElem.innerHTML(innerHTMLString); } parentDiv.appendChild(newElem); })Haciéndolo marginalmente más eficiente al no tener que llamar a innerHTML dos veces. Esta es una mejor técnica a medida que su código evoluciona y puede realizar numerosas llamadas a la función innerHTML.