Organize data with Underscore.js

Introduction

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?

Underscore is a JavaScript library that provides many useful helper functions without having to extend built-in objects. This tutorial uses the following 5 helper functions:

  1. _.max, which can find the maximum element in a list
  2. _.filter, which returns all values that pass some predicate
  3. _.sortBy, which can sort the values of an object by some criteria
  4. _.pluck, which isolates a certain property of an object
  5. _.chunk, which can break up a single array into multiple arrays, each with a certain number of elements

Sample Images

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
Text Name name
Number Language Arts language_arts
Number Science science
Number Math math
Number Social Studies social_studies
Number P.E. pe

 

The layout on the form settings will look like the following:

 

Sample Code for JavaScript Customization

Save the above program as a JavaScript file. Navigate to the Kintone CDN and copy the URL for the Underscore.js library. Next, click the gear icon from the created App to access the App settings, and navigate to the App Settings tab. Under Customization and Integration, click JavaScript and CSS Customization. Under the Upload JavaScript for PC section, click Add Link and enter the saved URL for the Underscore.js library. Under the same section, click Add File and upload the saved JavaScript file. The Underscore.js library should be above the JavaScript file as follows:

 

js_settings.png

 

Save the JavaScript and CSS Customization settings and update the App. The calculated points should now be shown in the header of the App.

Code Explanation

The following section will explain the above JavaScript program. For more information on the Underscore.js helper methods, refer to the Underscore.js documentation

kintone.events.on Event

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.

fetchRecords Function

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.

Finally

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

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!