[英]Javascript How to retrieve data using API
I would like to connect to an API and retrieve data from it.我想连接到 API 并从中检索数据。 I need to do it on the Hubspot CMS.我需要在 Hubspot CMS 上执行此操作。
This is a link to the API:这是 API 的链接:
https://staging.tabsera.com/apiDoc/#api-landing-getCourses 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:我尝试使用 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 https://codepen.io/zestweb/pen/zYqeNMr
Any help is highly appreciated.任何帮助都受到高度赞赏。
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);});
There is no results
field in your response, try with courses
directly:您的回复中没有results
字段,请直接尝试courses
:
fetch('https://staging.tabsera.com/api/v1/landing/courses')
.then(response => response.json())
.then(data => console.log(data.courses))
I used axios;我使用了 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)
});
You can add the log line console.log(data)
before the the line let courses = data.results;
您可以在let courses = data.results;
行之前添加日志行console.log(data)
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;
所以你可以let courses = data.courses;
课程的阅读let courses = data.courses;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.