Swapi APIからデータを取得するhttps://swapi.co/api/people/

Question

https://swapi.co/api/people/すべての名前とその他の詳細を取得したいが、データを取得するためにaxios呼び出しを使用しているときに、私はすべてundefinedを取得している1つの名前が必要な場合は、コンソールで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); 

Answer 1

https://swapi.co/api/peopleからJSONデータはnameメンバーを持っていません。その代わりに、オブジェクトの配列であるresultsのメンバーがあり、それぞれのメンバーはnameです。

ですから、各name取得することdata.results配列をループする必要があります。

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エンドポイントは、結果ページを区切り。

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>