Javascript如何使用API检索数据

Question

我想连接到API并从中检索数据。我需要在Hubspot CMS上完成。

这是API的链接：
https://staging.tabsera.com/apiDoc/#api-着陆getCourses

我曾尝试使用Codepen示例来完成此操作，但它没有显示数据，即使控制台没有显示任何错误：

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

非常感谢您的帮助。

Answer 1

请尝试一下。

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

Answer 2

响应中没有results字段，请直接使用courses：

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

Answer 3

我使用了axios；我得到了你需要的。这是一个简单的方法。

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

Answer 4

您可以在let courses = data.results;行之前添加日志行console.log(data)

在那里，您可以在浏览器的控制台窗口(如下所示(中看到，数据对象包含课程属性，而不是结果。courses: Arabic: []English: [{…}]Maths: []Science: [{…}]Social: []

因此，您可以将课程的阅读与let courses = data.courses;进行比较