![](/img/trans.png)
[英]How to display a single JavaScript Object / JSON item from API Call
[英]How to Call Array in Object by Javascript from API URL
我嘗試從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/中的電影標題。
有人幫忙嗎? 謝謝
data[0].results
-在基礎data
中不存在。 .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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.