Convert category dropdown to pull data from API

[MiguelLopez6]

What we need to code

Create a REST API call to get the categories from https://nccovid.vizioz.com/api/v1/resource/settings

HTTP GET https://nccovid.vizioz.com/api/v1/resource/settings

Use the data returned to populate the category selection dropdown.

The data returned is in JSON format, and returns an object containing both a category list (including subcategories) and a regions list. Only the categories are to be used now.

Additional context

The documentation for the API can be found at https://github.com/Vizioz/CovidSupport/blob/master/documentation.md

[readingdancer]

Please add the API URL to the /themes/theme.config.js file so that it is configurable per site.

[jasonajones73]

@readingdancer & @MiguelLopez6, I started taking a look at this and I keep running into the same error as I'm testing. I have the API call working fine in a stand-alone script but just not sure if it is a server issue or something I'm doing that is hanging things up.

I'm trying to use axios to make the call on component create or mount but keep getting this error message:

Access to XMLHttpRequest at 'https://nccovid.vizioz.com/api/v1/resource/settings' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://nccovid.vizioz.com/api/v1/resource/settings net::ERR_FAILED

Here is my axios API call for your reference:

const apiClient = axios.create({
      baseURL: 'https://nccovid.vizioz.com/api/v1/',
      withCredentials: false,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    })
    apiClient
      .get('resource/settings')
      .then((response) => (this.categories = response.data.categories))

Do you know if this is something with the server or an issue with my code? I apologize if this is something basic or obvious. I am pretty new to this with JavaScript. Thanks for your help!