Regarding I’m not using server-side code I have to use a workaround to get and display data from a different domain using an AJAX call. This is because the well-known cross-site scripting policy. To overcome this, a popular solution that many APIs are using today is to return the data in jsonp format.
The following screenshot shows a list of products coming from my own API and render via AJAX.
That was the easy part. Now we need to find a way to have different views with different data without any code behind the scenes. To build up a product detail view we cannot use the traditional approach of creating a new page which receives the ID of the product to show. However what we can do is to take advantadge of the already existent data we have stored in the first step. If we have retrieved all the products in the first step why do we need to do another call to the API to get specific product? We can just read our array of data and search for the one we’re interested in. Then just show it reloading the container we were using before for the listing.