Javascript：如何使用fetch从数组中输出某些信息？

所以我正在做一个Javascript技术练习，我几乎完成了，我正在尝试从一个API url输出数据，并将其显示在我的html页面上

我拥有我想要的一切，但是我无法显示api中的标题，该api说

保留你想要的

自

步骤编号

我只需要

stepNumber

3

来显示

保留你想要的

，而不是

保留你喜欢的

如何使用当前代码实现这一点

Javascript

fetch('https://uqnzta2geb.execute-api.us-east-1.amazonaws.com/default/FrontEndCodeChallenge')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        appendData(data);
    })
    .catch(function (err) {
        console.log('This is an error', err);
    });

function appendData(data) {
    let mainContainer = document.getElementById("testdata");
    let titleContainer = document.getElementById("testdata");
    let bodyContainer = document.getElementById("testdata");


    data
    .filter(item => ["1", "2", "3", "4"].includes(item.stepNumber))
    .sort((a, b) => +a.stepNumber - b.stepNumber)
    .forEach(({id, stepNumber, versionContent}) => {
        const div = document.createElement("div");
        const divTwo = document.createElement("span");
        const divThree = document.createElement("p");

        const {title, body} = versionContent.slice().pop();

        div.innerHTML = stepNumber;
        divTwo.innerHTML = versionContent[0].title;
        divThree.innerHTML = body;


        mainContainer.appendChild(div);
        titleContainer.appendChild(divTwo);
        bodyContainer.appendChild(divThree);
    });

}

---

尝试使用JSON库！在

“步骤编号”：3

下，您有

版本内容

中的3个元素，“保留您喜欢的”、“保留您想要的”和“保留所有内容”。您似乎只使用它的第一个元素，疯狂的

versionContent.slice（）.pop（）

和

versionContent[0]

都可以这样做。如果您也想看到第二个和第三个元素，可以使用

versionComponent.forEach（）

循环来代替。@tevemadar For

“stepNumber”：3

我只需要显示

保留您想要的内容。我应该摆脱
forLoop
？你可以硬编码一些讨厌的黑客，比如
divTwo.innerHTML=versionContent[stepNumber==3？1:0]，但不清楚为什么需要三个元素中的一个。@tevemadar这是一个技术练习，所以他们希望我们显示API中的特定信息。非常感谢。你知道有什么好的网站或教程我可以看吗？