Tengo tres funciones similares que llaman a datos JSON desde una API usando botones HTML y los cambian a una cadena usando stringify. Los resultados se muestran en un div, y cada nueva llamada se agrega a la página actual del navegador, haciéndola más larga. Me gustaría que cada nueva llamada reemplace los datos anteriores que se muestran en la página.
Si lo entiendo correctamente, no puedo usar ReplaceChild una vez que el JSON está en cadena. He intentado usar string.replace(), pero tal vez lo esté usando incorrectamente.
Aquí está el código de trabajo que estoy tratando de construir:
<body> <button onclick="awardees()">View NDNP Awardees</button> <button onclick="ocrFeed()">View Recently-Added OCR'd Pages</button> <button onclick="batches()">View Available Batches</button> <script> function awardees(){ fetch('https://chroniclingamerica.loc.gov/awardees.json') .then(function(response) { return response.json(); }) .then(function(myJson) { var string = JSON.stringify(myJson); document.getElementById('results').innerHTML += "<br/>"+string; }); } function ocrFeed(){ fetch('https://chroniclingamerica.loc.gov/ocr.json') .then(function(response) { return response.json(); }) .then(function(myJson) { var string = JSON.stringify(myJson); document.getElementById('results').innerHTML += "<br/>"+string; }); } function batches(){ fetch('https://chroniclingamerica.loc.gov/batches.json') .then(function(response) { return response.json(); }) .then(function(myJson) { var string = JSON.stringify(myJson); document.getElementById('results').innerHTML += "<br/>"+string; }); } </script> <div id ="ticket"> <span id="results"></span> </div> </body> </html>¿Dónde necesitaría agregar líneas adicionales y qué método cree que sería mejor?
¡Muchas gracias!
Si entiendo correctamente, solo debe reemplazar document.getElementById('results').innerHTML += "<br/>"+string; por document.getElementById('results').innerHTML = "<br/>"+string; y reemplazará el contenido div con una nueva cadena en lugar de agregarlo al existente.