This article shows how to sort through and manipulate data with the Underscore.js library. This tutorial builds on the example from the Display radar charts with chart.js article, which displays grade reports for each record in a student grade database. In this tutorial, a similar database will be created and the Underscore.js library will be used to organize multiple grade records.
What is Underscore.js?
- _.max, which can find the maximum element in a list
- _.filter, which returns all values that pass some predicate
- _.sortBy, which can sort the values of an object by some criteria
- _.pluck, which isolates a certain property of an object
- _.chunk, which can break up a single array into multiple arrays, each with a certain number of elements
This tutorial builds a database of students using the same fields and settings as the chart.js tutorial (omitting the two Calculated fields and the Field Group).
Information is then displayed in the header space above the record list using Underscore.js. Using functions described later in this tutorial, the following can be calculated and displayed:
- The student with the highest score in the science class
- The students whose averaged grades exceed 90
- Study partners for students in the same grade range in the math class
Setting Up the App
Create an App with the following fields:
|Field Type||Field Name||Field Code|
The layout on the form settings will look like the following:
An event is triggered when the App's list view is displayed. The rest of the program runs after this trigger.
For more information, refer to the Kintone Event Handling API article.
This section declares a function that calls the Get Records REST API to retrieve all the records available in the App. Although the Record Index Show event specified in the previous code returns the App's records in the event object, the maximum number of records that can be returned with the event object is 100 (the total number of records that can be displayed in one page on the record list page). The fetchRecords function is used instead to make sure that all records are retrieved no matter the total number of records.
Return if ID Already Exists
This section checks to see if the HTML element with the ID p1 already exists. This is necessary so that the fetchRecords function is not triggered each time the user proceeds or goes back a page of records since it is unnecessary to retrieve the records each time, if all records are retrieved when the record list is initially loaded. Therefore, if the p1 element already exists, the function is terminated with a return statement, and the program is ended. If p1 does not exist, the program continues.
Get Header Space Element
This section retrieves the header space element so that the data can be displayed in the header, and places it in the variable called header to reference later.
Execute fetchRecords Function
The fetchRecords function is executed.
_.max Helper Function
This section uses the _.max helper function of Underscore.js to find the student whose science score is the highest. Then, the createElement method is used to create a new p element, and place in text that states the student with the highest science score is the one that was determined by the _.max helper function.
_.filter Helper Function
This section uses the _.filter helper function of Underscore.js to find the students whose average score of all five subjects is 90 or higher. A new variable called highGradeStudents is created to create a string of students who meet the criteria. Then, the createElement method is used to create a new p element, and place in text that states the students with an average score of 90 or higher are the ones determined by the _.filter helper function.
_.sortBy, _.pluck, and _.chunk Helper Functions
This section uses the _.sortBy, _.pluck, and _.chunk helper functions to sort the students by their math grades and create pairs of students whose grades are the most similar.
First, the _.sortBy helper function is used to first sort the students by their math grade and insert the array of students into a variable called sortedByMathGrades.
Then, the _.pluck helper function is used to extract the name property value from the sorted students and replace the sortedByMathGrades with only the name property.
Next, the _.chunk helper function is used to group the students into pairs. A new variable called groups is created to put the partners together into a string.
Finally, the createElement method is used to create a new p element, and place in text that states who the student pairs are for study groups in math class.
Underscore.js provides over 100 other functions that can manipulate lists, objects, collections, and functions. All of these helper methods are fully documented at the Underscore.js website.