Получение данных из API Swapi https://swapi.co/api/people/

Question

Получение данных из API Swapi https://swapi.co/api/people/

1

Я хочу получить https://swapi.co/api/people/ все имя и другие детали, но когда я использую вызов axios для получения данных, и я получаю undefined для всех данных, но если хотите, чтобы одно имя я получаю ошибка CORS в консоли.

let button = document.querySelector("#button");
let name = document.querySelector("#displayDetail");

function getDetail(){
  var apiURL="https://swapi.co/api/people";
  axios.get(apiURL).then(function(response){    
    showDetail(response.data);
  });    
}

function showDetail(data){
  name.innerText=data.name;
}    

button.addEventListener('click',getDetail);

app_dev 18 нояб. 2017, в 13:02

Источник

Теги:

javascript

axios

api

cors

1 ответ

Ещё вопросы

sideshowbarker · Accepted Answer · 2017-11-18T12-44-00.000Z

Данные JSON от https://swapi.co/api/people не имеют name. Вместо этого у него есть элемент results, представляющий собой массив объектов, каждый из которых имеет член name.

Таким образом, вам нужно пройти через этот массив data.results чтобы получить каждое name:

function getDetail() {
  var apiURL = "https://swapi.co/api/people";
  axios.get(apiURL).then(function(response) {
    showDetail(response.data);
  });
}

function showDetail(data) {
  for (i = 0; i < data.results.length; i++) {
    console.log(data.results[i].name);
  }
}
getDetail();

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Но обратите внимание: эта конечная точка API разбивает страницы на результаты; поэтому, чтобы получить все имена, проверьте data.next чтобы получить URL-адрес для следующей страницы, а затем создайте новый запрос с этим URL-адресом, чтобы получить следующий набор результатов:

function getDetail(apiURL) {
  axios.get(apiURL).then(function(response) {
    showDetail(response.data);
  });
}

function showDetail(data) {
  for (i = 0; i < data.results.length; i++) {
    names = names + data.results[i].name + "\n";
    // name1.innerText = name1.innerText + "\n" + data.results[i].name;
  }
  if (data.next) {
    getDetail(data.next);
  } else {
    console.log(names); // name1.innerText = names;
  }
}
var names = "";
getDetail("https://swapi.co/api/people");

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

спасибо, это сработало .. но name1.innerText = data.results [i] .name показывает только одно имя на веб-странице, но в консоли data.results [i] .name показывает 10 names.function showDetail (data) {for ( i = 0; i <data.results.length; i ++) {name1.innerText = data.results [i] .name; }}
name1.innerText =data.results[i].name будет показывать только одно имя, потому что каждый раз, когда вы вызываете его в цикле, он перезаписывает name1.innerText , а не добавляется к нему. Поэтому, если вы хотите, чтобы name1.innerText имел полный список имен, вам нужно создать строку names (или любую data.next ) и добавить к ней имена, и только тогда, когда data.next больше data.next , выполните name1.innerText = names . Смотрите обновленный фрагмент кода в ответе.
См. Stackoverflow.com/help/someone-answers для объяснения того, что делать, когда кто-то отвечает на вопрос для вас в Stack Overflow. У вас недостаточно репутации, чтобы проголосовать, но у вас достаточно репутации, чтобы принимать ответы, нажав на флажок рядом с любым ответом, чтобы переключить его с серого на заполненный. Это следует делать для любых ответов, решить проблемы в ваших вопросах. И вы получаете 2 балла к вашему представителю каждый раз, когда принимаете ответ, поэтому принятие правильных ответов также приближает вас к получению достаточного количества повторений для других дел (например, upvote)
В качестве альтернативы, я думаю, вы могли бы просто сделать name1.innerText = name1.innerText + data.results[i].name в цикле, который будет каждый раз брать существующее содержимое name1.innerText и добавлять data.results[i].name к нему, а затем запишите это обратно в name1.innerText . Смотрите обновленный фрагмент.
но для фильма мне нужно попасть в другой api swapi.co/api/films {id}). как получить 2 апи
Для этого вы, вероятно, хотите создать отдельный новый вопрос