将 API 在浏览器 window 中获取的结果替换为新调用 (JavaScript) 的结果

Question

我有三个类似的函数，它们使用 HTML 按钮从 API 调用 JSON 数据，并使用 stringify 将其更改为字符串。结果显示在 div 中，每个新调用都会添加到当前浏览器页面，使其更长。我希望每个新调用都替换页面中显示的所有先前数据。

如果我没理解错的话，一旦 JSON 被字符串化，我就不能使用 ReplaceChild。我试过使用 string.replace()，但也许我使用不正确。

这是我尝试构建的工作代码：

<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>

我需要在哪里添加额外的行，您认为哪种方法最好？

非常感谢！

Answer 1

如果我没理解错的话，你应该只替换 document.getElementById('results').innerHTML += "<br/>"+string; by document.getElementById('results').innerHTML = "<br/>"+string; 并且您将用新字符串替换 div 内容，而不是将其添加到现有字符串中。

将 API 在浏览器 window 中获取的结果替换为新调用 (JavaScript) 的结果

Replace results of API fetch in browser window with results of a new call (JavaScript)

javascript

html

fetch-api

str-replace