I want to fetch the / all name and other detail but when I am using an axios call to get the data and I am getting undefined for all data but if want one name I am getting a CORS error in console.

let button = document.querySelector("#button");
let name = document.querySelector("#displayDetail");

function getDetail(){
  var apiURL="";
  axios.get(apiURL).then(function(response){    
    showDetail(response.data);
  });    
}

function showDetail(data){
  name.innerText=data.name;
}    

button.addEventListener('click',getDetail);

I want to fetch the https://swapi.co/api/people/ all name and other detail but when I am using an axios call to get the data and I am getting undefined for all data but if want one name I am getting a CORS error in console.

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);

• javascript
• cors
• axios

Share Improve this question Follow edited Nov 18, 2017 at 14:36 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Nov 18, 2017 at 11:16 app_devapp_dev 8411 gold badge22 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The JSON data from https://swapi.co/api/people doesn’t have a name member. Instead it has a results member that is an array of objects, each of which has a name member.

So you need to loop through that data.results array to get each 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./axios/dist/axios.min.js"></script>

But note: That API endpoint paginates the results; so to get all the names, check data.next to get the URL for the next page, then make a new request with that URL to get the next set of results:

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./axios/dist/axios.min.js"></script>

try with this swapi.co/api/people/ change for swapi.dev/api/people/

All resources support a search parameter that filters the set of resources returned. This allows you to make queries like:

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

To see the set of search fields for each resource, check out the individual resource documentation.