Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Lesson 2 : Part 4 - Showing Movie Details || JSON

Subramanian Meyyappan-OracleSep 1 2016 — edited Sep 2 2016

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.

pastedImage_2.png

Is there any trick? or myself missing any step?

Regards,

SM

Comments
Post Details
Added on Sep 1 2016
4 comments
538 views