javascript - 如何通过 Javascript 从 API URL 调用对象中的数组

Question

我尝试从swapi调用API，我需要显示电影的标题。我使用 jQuery 来创建它

这是我的 JavaScript

$(function(){
  function promiseTest(){
    return $.ajax({
      type: 'GET',
      url: 'https://swapi.co/api/people/',
    })
  }
  function promiseTest2(){
    return $.ajax({
      type: 'GET',
      url: 'https://swapi.co/api/films/', 
    })
}
var promise = promiseTest();
var promise2 = promiseTest2();

var bothPromise = $.when(promise, promise2);
bothPromise.done(function(data){
  $.each(data, function(i, name){
  $("#app").append("<ul><li>Name: "+ i.name +"</li><li>Height: "+name.height+" </li><li>Skin Color: "+ name.skin_color +"</li><li>Gender: "+name.gender+" </li><li>Film: "+ name.films.title +"</ul>")
})
})

HTML:

<div id="app"></div>

这是我的完整代码 http://jsfiddle.net/dedi_wibisono17/phq7t50u/2/

我尝试过 this code ，但我想显示 https://swapi.co/api/films/ 中的电影标题.

有人帮忙吗？谢谢

Answer 1

• 人员数组可在 data[0].results 中找到 - 它不存在于基础 data 中。
• 当您使用 jQuery .each 时，第一个参数是迭代次数，而不是正在迭代的项目。为函数提供第二个参数，并在指定人员的姓名、高度等时使用它:

function promiseTest() {
  return $.ajax({
    type: 'GET',
    url: 'https://swapi.co/api/people/',
  })
}

function promiseTest2() {
  return $.ajax({
    type: 'GET',
    url: 'https://swapi.co/api/films/',
  })
}

var promise = promiseTest();
var promise2 = promiseTest2();

var bothPromise = $.when(promise, promise2);

bothPromise.done(function(data) {
  $.each(data[0].results, function(i, e) {
    $("#app").append("<ul><li>Name: " + e.name + "</li><li>Height: " + e.height + " </li><li>Skin Color: " + e.skin_color + "</li><li>Gender: " + e.gender + " </li><li>Film: " + e.films + "</ul>")
  })
  /*alert("done")*/
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

但是根本不需要 jQuery 来实现这一点 - 您可以使用 fetch 和 Promise.all，它们在非古代浏览器中受到 native 支持:

Promise.all([
  fetch('https://swapi.co/api/people/').then(res => res.json()),
  fetch('https://swapi.co/api/films/').then(res => res.json())
]).then(data => {
  const app = document.querySelector('#app');
  data[0].results.forEach((e) => {
    app.innerHTML += "<ul><li>Name: " + e.name + "</li><li>Height: " + e.height + " </li><li>Skin Color: " + e.skin_color + "</li><li>Gender: " + e.gender + " </li><li>Film: " + e.films + "</ul>"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>