如何通过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/

我已经尝试过使用此代码 ，但是我想显示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 ，这在非古代浏览器中是本地支持的：

 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>