Geertjan's Blog

Simple JSON and ojListView Sample

Geertjan Wielenga
Product Manager

Simple sample to create ojListView from a JSON file (which I copied locally from here) and therefore looks like this:

{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}

Here's the business logic:

'ojs/ojcore', 'knockout', 'jquery',
function (file, oj, ko, $) {
function DashboardViewModel() {
var self = this;
self.data = [];
var content = JSON.parse(file);
var employees = content.employees;
for (var i = 0; i < Object.keys(employees).length; i++) {
var employee = employees[i];
first: employee.firstName,
last: employee.lastName
self.dataSource = new oj.ArrayTableDataSource(
{idAttribute: "first"}
return new DashboardViewModel();

And the view:

<ul data-bind="ojComponent: {
component: 'ojListView',
data: dataSource,
item: {template: 'employee_template'},
selectionMode: 'single'}">
<script type="text/html" id="employee_template">
<h3 data-bind="text: first"></h3>
<span data-bind="text: last"></span>

Join the discussion

Comments ( 1 )
  • Alessio Wednesday, May 17, 2017
    Great Post!
    only one question.... what is the self.data.push ?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.