从Swapi API获取数据https://swapi.co/api/people/

Question

我想获取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); 

Answer 1

来自https://swapi.co/api/people的JSON数据没有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>