Блог

Главная - Вопросы по программированию - Javascript Как извлекать данные с помощью API

Javascript Как извлекать данные с помощью API

#javascript #jquery #node.js #json #reactjs

#javascript #jquery #node.js #json #reactjs

Вопрос:

Я хотел бы подключиться к API и извлечь из него данные. Мне нужно сделать это на CMS Hubspot.

Это ссылка на 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

Любая помощь приветствуется.

Ответ №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);});

Комментарии:

1. Это здорово! Я добавил ваш код в этот codepen: codepen.io/zestweb/pen/zYqeNMr Как мне добавить новый элемент, например, объект API имеет элемент с именем description, я хочу создать div, содержащий описание, я добавил его в codepen, но, похоже, он небудет работать?

2. Пожалуйста, используйте этот код. добавить(li, span); добавить (li, div1);

Ответ №2:

В results вашем ответе нет поля, попробуйте courses напрямую:

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

Ответ №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)
    });

Ответ №4:

Вы можете добавить строку журнала console.log(data) перед строкой let courses = data.results;

Там вы можете увидеть в окне консоли (как показано ниже) вашего браузера, что объект data содержит свойство courses, а не results . courses: Arabic: []English: [{…}]Maths: []Science: [{…}]Social: []

Таким образом, вы можете скорректировать чтение курсов для let courses = data.courses;