Javascript How to retrieve data using API

Question

I would like to connect to an API and retrieve data from it. I need to do it on the Hubspot CMS.

This is a link to the API:
https://staging.tabsera.com/apiDoc/#api-landing-getCourses

I have attempted to do this using a Codepen example but it is not showing data even though the console is not showing any errors:

const courses = document.getElementById('courses'),
url = 'https://staging.tabsera.com/api/v1/landing/courses';

const createNode = element => {return document.createElement(element);};
const append = (parent, el) => {return parent.appendChild(el);};

fetch(url).
then(response => {return response.json();}).
then(data => {
  let courses = data.results;
  return courses.map(courses => {
    let english = createNode('<div class="english">'),
    img = createNode('img'),
    span = createNode('span');
    img.src = runner.picture.medium;
    span.innerHTML = `${courses.english.author} ${courses.name.last}`;
    append(div, img);
    append(div, span);
    append(div, div);
  });
}).
catch(error => {console.log(error);});

https://codepen.io/zestweb/pen/zYqeNMr

Any help is highly appreciated.

user14325562 · Accepted Answer · 2020-09-24 08:51:54Z

2

Please try it.

const ul = document.getElementById('runners'),
url = 'https://staging.tabsera.com/api/v1/landing/courses';

const createNode = element => {return document.createElement(element);};
const append = (parent, el) => {return parent.appendChild(el);};

fetch(url).
then(response => {return response.json();}).
then(data => {
  let courses = data.courses;
  for (course in courses) {
    runners = courses[course];
    runners.map(runner => {
      let li = createNode('li'),
      span = createNode('span');
      span.innerHTML = `${runner.author}`;
      append(li, span);
      append(ul, li);
    });
  }
  
}).
catch(error => {console.log(error);});

answered Sep 24, 2020 at 8:51

user14325562

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

2 Comments

zestzahir Over a year ago

That's great! I have added your code in this codepen: codepen.io/zestweb/pen/zYqeNMr How do I add a new item for example the API object has an item called description, I want to create a div that contains the description, I have added it to the codepen but it doesn't seem to be working?

user14325562 Over a year ago

Please use this code. append(li, span); append(li, div1);

Damian Peralta · Accepted Answer · 2020-09-24 08:31:29Z

1

There is no results field in your response, try with courses directly:

fetch('https://staging.tabsera.com/api/v1/landing/courses')
  .then(response => response.json())
  .then(data => console.log(data.courses))

answered Sep 24, 2020 at 8:31

Damian Peralta

1,8969 silver badges12 bronze badges

Comments

ORCAs · Accepted Answer · 2020-09-24 08:37:20Z

1

I used axios; I got what you need. It is an easy way.

var axios = require('axios');
var qs = require("querystring");

axios("https://staging.tabsera.com/api/v1/landing/courses", {
    method: "GET"
})
    .then(response => {
        console.log("Application data");
        console.log(response.data.courses.English);
    })
    .catch(err => {
        console.log("**************Get access token error**************")
        console.log(err)
    });

answered Sep 24, 2020 at 8:37

ORCAs

1611 gold badge3 silver badges13 bronze badges

Comments

tkalatz · Accepted Answer · 2020-09-24 08:49:20Z

1

You can add the log line console.log(data) before the the line let courses = data.results;

There, you can see in the console window (as presented below) of your browser that the data object contains a courses property and not results. courses: Arabic: []English: [{…}]Maths: []Science: [{…}]Social: []

So you can corrent the reading of courses to let courses = data.courses;

answered Sep 24, 2020 at 8:49

tkalatz

366 bronze badges

Collectives™ on Stack Overflow

Javascript How to retrieve data using API

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related