Así que he leído de un archivo JSON. Y puedo obtener fácilmente el valor del nombre y el valor de photo_url y parte de la biografía de cada "persona".

https://codepen.io/lpmurray16/pen/ExvpQgP

Aquí es donde está el JSON: https://bensdemo.prod.equisolve-dev.com/api/v1/eq-test

Entonces, en el archivo JavaScript que se encuentra dentro del codepen vinculado anteriormente (perdón por el formato, lo hace cada vez que guardo ...), pero las líneas 23-40 son una función que se llama onClick para la clase "tarjeta" y la etiqueta del botón en estas líneas a continuación... Paso los argumentos a esta función como ${person.arg} y puedes ver que funciona para algunas de las personas porque cuando haces clic en las primeras tres personas se abre el modal con la información correcta en cada lugar Pero en uno de los person.bio dentro del JSON se rompe debido a un delimitador en una etiqueta de anclaje como esta --> ".

¿Me estoy perdiendo algo obvio? Esto es lo más cerca que estoy sin arrancarme el pelo. Y el mensaje de error simplemente no se detecta "SyntaxError: token no válido o inesperado" en la línea 1 del archivo HTML. ¿Cuál no ayuda en absoluto? ¿Me estoy perdiendo una etiqueta de cierre o algo así?

 document.getElementById("cards").innerHTML = ` ${allData.map(function (person) { let regex = /[_\*#"]/g; return ` <div class="card flex-col" onClick="changeModalContent('${person.name.replace(regex,"")}', '${person.title}','${person.photo_url}', '${person.bio}'); modal.open();"> <div class="card_top"> <img class="prof_pic" src="${person.photo_url}" alt="${person.name.replace(regex, "")}"/> </div> <div class="card_bottom flex-col"> <h3 class="prof_name">${person.name.replace(regex, "")}</h3> <p class="prof_title">${person.title}</p> <button class="view_button" onClick="changeModalContent('${person.name.replace(regex,"")}', '${person.title}', '${person.photo_url}', '${person.bio}'); modal.open();">View Bio </button> </div> </div> `; }).join("")} `;