Hi Folks,
Trying to practicing one of the example "Displaying Movie details using JSON" as shown in video. I'm failed to complete the example.
Created a knockout JET module. Created the two following files and done mappings in "navigation.js" and "appController.js"
ProjectDay2L.html
<table data-bind="ojComponent: {component: 'ojTable',
data: datasource2,
columns: \[{headerText: 'Director', field: 'director'},
{headerText: 'Title', field: 'title'},
{headerText: 'Genre', field: 'genre'},
{headerText: 'Year', field: 'releaseYear'}
\]}">
</table>
ProjectDay2L.js
define(['ojs/ojcore', 'knockout', 'ojs/ojtable', 'ojs/ojtree'
], function (oj, ko) {
/\*\*
\* The view model for the main content view template
\*/
function ProjectDay2LContentViewModel() {
var self = this;
self.data = ko.observableArray();
$.getJSON("[http://movieapp-sitepointdemos.rhcloud.com/api/movies](http://movieapp-sitepointdemos.rhcloud.com/api/movies)").
then(function (movies) {
$.each(movies, function () {
self.data.push({
title: this.title,
director: this.director,
releaseYear: this.releaseYear,
genre: this.genre
});
});
});
self.datasource2 = new oj.ArrayTableDataSource(self.data, {idAttribute: 'title'});
}
return ProjectDay2LContentViewModel;
});
I got the below error in browser log:
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) (17:36:41:493 | debug, css)
at index.html
XMLHttpRequest cannot load http://movieapp-sitepointdemos.rhcloud.com/api/movies. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (17:36:44:247 | error, javascript)
at index.html
>
Output: Details had not shown in the browser.

Is there any trick? or myself missing any step?
Regards,
SM