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

Posted 2023-03-04

【中文标题】从 Swapi API https://swapi.co/api/people/ 获取数据

【英文标题】：Getting data from Swapi API https://swapi.co/api/people/

【发布时间】：2018-05-02 02:25:53

【问题描述】：

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

【参考方案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>

【讨论】：

谢谢它的工作.. 但 name1.innerText =data.results[i].name 在网页中仅显示一个名称，但在控制台中 data.results[i].name 显示 10 个名称。函数 showDetail(data) for (i = 0; i

name1.innerText =data.results[i].name 只会显示一个名称，因为每次你在循环中调用它时，它都会覆盖name1.innerText，而不是附加到它上面。因此，如果您希望 name1.innerText 拥有完整的名称列表，那么您需要创建一个 names（或其他）字符串并将名称附加到该字符串，然后仅当没有更多 data.next 时，才执行name1.innerText = names。请参阅答案中的更新代码 sn-p。

请参阅***.com/help/someone-answers，了解当有人在 Stack Overflow 为您回答问题时该怎么做。您还没有足够的声望来投票，但是您确实有足够的声望来接受答案，方法是单击任何答案旁边的复选标记，将其从灰色切换为已填充。您应该对您在此处获得的任何答案执行此操作解决您的问题中的问题。每次您接受答案时，您的代表都会获得 2 分，因此接受正确答案也可以让您更接近获得足够的代表做其他事情（例如投票）

或者，我想你可以在循环中执行name1.innerText = name1.innerText + data.results[i].name，每次都会获取name1.innerText的现有内容并将data.results[i].name附加到它，然后将其写回@ 987654343@。查看更新的 sn-p。

但是对于电影我需要打另一个 api swapi.co/api/filmsid) 。如何获得命中 2 api

【参考方案2】：

试试这个 swapi.co/api/people/ 为。。改变 swapi.dev/api/people/

【参考方案3】：

所有资源都支持过滤返回的资源集的搜索参数。这使您可以进行如下查询：

https://swapi.co/api/people/?search=r2d2

要查看每个资源的搜索字段集，请查看各个资源文档。