javascript - Javascript 如何使用 API 检索数据
问题描述
我想连接到 API 并从中检索数据。我需要在 Hubspot CMS 上进行。
这是 API 的链接:
https ://staging.tabsera.com/apiDoc/#api-landing-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
非常感谢任何帮助。
解决方案
请尝试一下。
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);});
推荐阅读
- html - 固定定位问题
- java - 无法正确调用 Java 中的 void 函数以输出到控制台
- vue.js - VueJS - prod build 从 HTML 中删除属性引号
- r - 从sliderInput控件R Shiny获取日期索引时返回Inf错误
- r - 使用列中的多个变量旋转更长的时间
- reactjs - 反应提交表单然后重定向问题
- elasticsearch - 如何在 Elasticsearch 中索引文档以最小化文档数量?
- javascript - 将下拉列表定位到特定值
- java - 使用 setOnSeekBarChangeListener 或 Button 的两个 SeekBar 的值的 Android Java 总和
- ios - iOS 部署目标“IPHONEOS_DEPLOYMENT_TARGET”设置为 8.0,在 Flutter 中如何更改最小 IOS 部署目标