Having trouble fetching a JSON

[ashvash90]

Hi,

I'm trying to migrate a Handlebars template over and map the values appropriately. Unfortunately I'm totally new to Alpine and I can't even get it to fetch from the Fetch API so I can't even start! Code below:

<div class="margin-top-lg js-adv-filter__gallery" x-data="data()" x-init="
        fetch('https://vitalconsular.b-cdn.net/(BLOG)%20Custom%20CSS%20and%20JS/json/provider-list.json')
          .then(response => response.json())
          .then(data => (providers = data));">

<template x-for="provider in providers">
<!-- OTHER HTML --!>
</template>

</div>

<script>
  function data() {
      return {
        providers: [],
      }
    }
</script>

Can someone tell me where I'm going wrong please?

I'd also like to know how to map the nested values from my JSON into the HTML. Does it work like Handlebars in that I can access {{courses.course)} for example? Or would I have to add another template tag with x-for="course in courses" or something like that?

Thanks!

[danddanddand]

At a glance code looks fine. I made codepen https://codepen.io/danddanddand/pen/zYZVjae that seems to work although I didn't look at the fetched data but you can see it there.

BTW this build is using #1607 experimental feature so just ignore the Alpine.enableDebugMode()