After creating the initial layout, let's implement the API access layer by encapsulating it in its own dedicated file and namespace:
- Create a file named api.js and implement the REST API query calls:
'use-strict';(function (window) { const ns = window.api = window.api || {}; // EDIT the URL with the the address of your REST API - const baseUrl = 'http://localhost:55564/api'; // build the URL for a REST API call and include the parameters function getApiAction(action, parameters = null) { const p = (!parameters || parameters.length === 0) ? '' : `/${Object.values(parameters).join('/')}`; return `${baseUrl}/${action}${p}`; } // iterate through products returned from REST API and set the primary image accordingly for each product ...