Using Glitch and Fetch to get data from an API

[FootFootFoot]

Hi,

I would like to use Glitch to fetch data from a Mapbox Geocoding API but I’m not having much luck. When I do this:

var response = fetch(myURL)
.then(response => response.json())
.then (data => console.log('data: ’ + JSON.stringify(data)))

I can tell that what I want has been returned to the console:

data: {“type”:“FeatureCollection”,“query”:[“1600”,“pennsylvania”,“avenue”,“washington”,“dc”],“features”:[{“id”:“address.1048737153875776”,“type”:“Feature”,“place_type”:[“address”],“relevance”:0.90963,“properties”:{“accuracy”:“rooftop”},“text”:“Pennsylvania Avenue Southeast”,“place_name”:“1600 Pennsylvania Avenue Southeast, Washington, District of Columbia 20003, United States”,“matching_place_name”:“1600 Pennsylvania Avenue Southeast, Washington, DC 20003, United States”,“center”:[-76.982015,38.879235],“geometry”:{“type”:“Point”,“coordinates”:[-76.982015,38.879235]},“address”:“1600”,“context”:[{“id”:“neighborhood.2918372884011750”,“text”:“Capitol Hill”},

The problem I’m having is I don’t know how to get the data in the console into something I can work with. All I want are the coordinates.

I’m self-taught so I know I have a big knowledge gap showing, but I’m missing the puzzle piece that gets me from data in console to data on screen. If anybody could give me a push or a boost or some kitty litter under my car tires, I’d sure appreciate it.

[christina]

Hey, so I typically use insertAdjacentHTML (instead of innerText) after mapping the data. Here’s an example from a project of mine using async await. The MapBox API is probably a bit different (every API is) but hopefully it helps. In my case I’m using the WordPress REST API to pull posts.

async function fetchPosts() {
  const response = await fetch('https://yoururl')
  const posts = await response.json()
  return posts
}
        
fetchPosts()
  .then(posts => posts.map(post => 
    document.querySelector('#cards').insertAdjacentHTML(
      'afterbegin',
        `<div class="col s12 m6">
           <div class="card hoverable">
             /* etc */`