所以我正在做一个Java技术练习,并且我几乎已经完成了它,我试图从API URL输出数据并将其显示在我的html页面上。
我基本上拥有了我想要的一切,但是我无法显示来自Keep What You Want
中stepNumber
的api标题。
我只需要stepNumber
3
来显示Keep What You Want
而不是Keep What You Like
。
如何使用当前代码执行此操作?
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);
});
}