Javascript:如何从 API 获取特定数据？

Question

我正在做 Javascript 练习，并尝试使用获取请求显示特定数据。

我正在尝试显示 api url 中 title 和 body 的数据。当我获取 body 和 title 数据时，由于某种原因，我不断收到 undefined 。

如何使用我当前的 JS 代码正确显示 body 和 title 中的数据？

感谢任何帮助，谢谢!

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');
    });

function appendData(data) {
    let mainContainer = document.getElementById("testdata");
    for (var i = 0; i < data.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Name: ' + data[i].id + ' ' + data[i].body;
        mainContainer.appendChild(div);
    }
}

Answer 1

body 和 title 位于 versionContent 属性(这是一个数组)内......即 data[i] .versionContent[0].body 其中 0 始终存在，但在某些情况下您也有 1 甚至 2 - 确实您想要所有版本还是只是最新版本？

对于最新的，你可以这样做

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');
    });

function appendData(data) {
    let mainContainer = document.getElementById("testdata");
    var newData = data
    .filter(function(item) {
        return ["1", "2", "3"].includes(item.stepNumber);
    })
    .sort(function(a, b) {
        return +a.stepNumber - b.stepNumber;
    });
    for (var i = 0; i < newData.length; i++) {
        var div = document.createElement("div");
        var versionContent = newData[i].versionContent.slice().pop();
        div.innerHTML = newData[i].stepNumber + ' Name: ' + newData[i].id + ' ' + versionContent.body;
        mainContainer.appendChild(div);
    }
}

<div id='testdata'></div>

在 ES2015+ 中

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

function appendData(data) {
    const mainContainer = document.getElementById("testdata");
    const steps = ["1", "2", "3"];
    data
    .filter(item => steps.includes(item.stepNumber))
    .sort((a, b) => +a.stepNumber - b.stepNumber)
    .forEach(({id, stepNumber, versionContent}) => {
        const div = document.createElement("div");
        const {title, body} = versionContent.slice().pop();
        div.innerHTML = stepNumber + ' Name: ' + id + ' ' + body;
        mainContainer.appendChild(div);
    });
}

<div id='testdata'></div>