API call returns url and not a value I need [duplicate]

async function getSwInfo(url) {
  try {
    const data = await fetch(url).then((res) => res.json());
    console.log(data);
    personData(data.results);
  } catch (error) {
    console.log(error);
  }
};

function personData(data) {
  const person = data[0];
  let personName = `
    <h2 id="name">${person.name}</h2>
    <p class="aurebesh">${person.name}</p>`;
  nameInfo.innerHTML = personName;
  let personBio = `
    <ul>
      <li><h3>Home Planet: </h3><p>${person.homeworld}</p></li>
      <li><h3>Birth Year: </h3><p>${person.birth_year}</p></li>
      <li><h3>Gender: </h3><p>${person.gender}</p></li>
      <li><h3>Species: </h3><p>${person.species}</p></li>
      <li><h3>Height: </h3><p>${person.height}</p></li>            
      <li><h3>Weight: </h3><p>${person.mass}</p></li>
      <li><h3>Hair Color: </h3><p>${person.hair_color}</p></li>
      <li><h3>Eye Color: </h3><p>${person.eye_color}</p></li>
    </ul>`;
  personInfo.innerHTML = personBio;
};

So far when I call my api it shows the information I want, but for the homeworld and species the value is a link to another URL. So that's what I keep getting back, how do I extract the homeworld 'name' and species 'name' from those?



Comments

Popular posts from this blog

Today Walkin 14th-Sept

Hibernate Search - Elasticsearch with JSON manipulation

Spring Elasticsearch Operations