X

Geertjan's Blog

  • February 24, 2016

Simple JSON and Oracle JET Example (Part 1)

Geertjan Wielenga
Product Manager

Here's my JSON:

http://movieapp-sitepointdemos.rhcloud.com/api/movies

Here's how to consume it in a JET module. First, the JavaScript side:

define(['ojs/ojcore', 'knockout', 'ojs/ojtable'
], function (oj, ko) {
function homeContentViewModel() {
var self = this;
self.data = ko.observableArray();
$.getJSON("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.dataSource = new oj.ArrayTableDataSource(
self.data,
{idAttribute: 'title'}
);
}
return homeContentViewModel;
});

And here's the HTML side:

<table data-bind="ojComponent: {component: 'ojTable', 
data: dataSource,
columns: [
{headerText: 'Director', field: 'director'},
{headerText: 'Title', field: 'title'},
{headerText: 'Genre', field: 'genre'},
{headerText: 'Year', field: 'releaseYear'}
]
}">
</table>

Join the discussion

Comments ( 4 )
  • Bruno Borges Friday, February 26, 2016

    Hi Geertjan, thanks for sharing this.

    Let's say I am using the quickstart JET project. Could you explain where exactly the javascript code should be placed?


  • Geertjan Friday, February 26, 2016

    In home.js.


  • Carl J. Mosca Thursday, February 23, 2017

    Good stuff. Do you happen to know of a nice example which uses HAL? I have looked at several JS libraries but they seem to include way more functionality than what I am after in this use case. Pagination and embedded resources functionality seems to be a good fit for an OracleJET example.


  • sai Friday, August 18, 2017
    Hi Geertjan,

    Can we use raw json data instead of this url "http://movieapp-sitepointdemos.rhcloud.com/api/movies".

    Explain how?
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services