X

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:

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

Here's the business logic:

define(['text!../data/employees.json',
'ojs/ojcore', 'knockout', 'jquery',
'ojs/ojlistview',
'ojs/ojarraytabledatasource'],
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];
self.data.push({
first: employee.firstName,
last: employee.lastName
});
}
self.dataSource = new oj.ArrayTableDataSource(
self.data,
{idAttribute: "first"}
);
}
return new DashboardViewModel();
}
);

And the view:

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

Join the discussion

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

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