API Fetch Request not Rendering

[Dezigncat89]

function fetchStarships() {
fetch(`https://swapi.dev/api/starships/`)
  .then(res => res.json())
  .then(starships => renderStarships(starships))
}
function renderStarships(starships) {
  starshipContainer.innerText = ""
  allStarships = starships
  starships.forEach(ship => {
  starshipContainer.insertAdjacentHTML("beforeend", `
<div class="shipCard">
  <h4>Starship Name: ${ship.name}</h4>
  <h4>Starship Filmography: ${ship.films}</h4>
  <h4>Max Speed: ${ship.max_atmosphering_speed}</h4>
  <h4>Hyperdrive Score: ${ship.hyperdrive_rating}</h4>
  $('.btn-counter').on('click', function(event, count) {
  event.preventDefault();
  <h6>Credit Cost: <span data-id="${ship.id}" class="cost_in_credits">${ship.cost_in_credits}</span></h6>
</div>`)})
}

Can someone please help me with my code above?

The issue I am having is that I am trying to create a list of Star Wars Starships that renders to separate card data like a real estate website. This is for a different school project I am working on and for some reason I get no data returned. Thanks.

[Sky020]

Welcome there,

When you navigate to the URL you are making a GET request to, what do you see?

• Do you see some text-representation of JSON data?
• Or, do you see rendered HTML webpage?

If the latter, then it means the URL does not return any JSON. Therefore, the .json method will not be able to parse the data. Typically, I would expect an error like:

Uncaught error: Unexpected token in JSON at position…

---

Now, diving deeper into this - best way to start debugging:

• Head to the URL
• Open your browser devtools
• Look at the Network tab: ignore the red (failed requests) - just my adblock
  
  

Now, things we are interested in:

1. The request made to the data (starships/)
2. The request type (GET)
3. The content-type (text/html; charset=utf-8)

Only when the content type is application/json can you use the .json method, and expect it to work.

Lastly, I suggest you wrap some of your content in a try...catch block, and console.log the error (if any).

Hope this helps

[Dezigncat89]

Thank you so much. I am new to programming and was working on this for days, trying to figure out what was wrong. Thanks again for the dev tools suggestion. Looks like I will have to make a get request that is not .json