Javascript: How do I fetch specific data from an API?

Question

I'm doing a Javascript exercise and I'm trying to display specific data using a fetch request.

I'm trying to display the data from title and body from the api url. I keep on getting undefined for some reason when I'm fetching for body and title data.

How do I do display the data from body and title correctly that with my current JS code?

Any help is appreciated, thanks!

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

the body and title are inside the versionContent property (which is an array) ... i.e. data[i].versionContent[0].body where 0 always exxists, but in some cases you also have 1 and even 2 - did you want all versions or just the latest? — Jaromanda X
– Jaromanda X, Commented Sep 16, 2019 at 1:05

Jaromanda X · Accepted Answer · 2019-09-16 01:35:51Z

1

the body and title are inside the versionContent property (which is an array) ... i.e. data[i].versionContent[0].body where 0 always exxists, but in some cases you also have 1 and even 2 - did you want all versions or just the latest?

For the latest, you can do

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>

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

edited Sep 16, 2019 at 1:35

answered Sep 16, 2019 at 1:12

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

spidey677 Over a year ago

It's working! I wanted to display step numbers 1-3 only. How can do i that?

Jaromanda X Over a year ago

in order? 1 to 3?

spidey677 Over a year ago

Yes sir, how can I do that?

Jaromanda X Over a year ago

Added second snippet @spidey677

spidey677 Over a year ago

Thank you! That works but the only piece I'm missing is displaying the step number? how do I do that?

|

Collectives™ on Stack Overflow

Javascript: How do I fetch specific data from an API?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related