How does manipulating multiple checkbox selection code work?

Question

I am following ag-grid's official tutorial:

https://www.ag-grid.com/angular-getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github

I reached the part where I have to manipulate the information regarding the selected checkboxes. However, the documentation is not detailed; It does not explain how the code actually works. Perhaps, this makes sense since it is not their job to explain in detail. However, for someone like me who doesn't have solid experience with working with angular technology and who wants to truly understand how things work, this is troublesome!

In the html file, I have been asked to add this:

<button (click)="getSelectedRows()">Get Selected Rows</button>

And in app.component.ts, I have been asked to add this:

getSelectedRows() {  
        const selectedNodes = this.agGrid.api.getSelectedNodes();   
        const selectedData = selectedNodes.map(node => node.data);   
        const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');   
        alert('Selected nodes: ${selectedDataStringPresentation}');   
    }

If someone could explain what the typescript code is doing exactly, that would be very generous. Thank you!

score 1 · Answer 1 · answered Apr 04 '19 at 12:54

I guess agGrid is the service storing your mock values, this simply gets an array of data from somwhere.
selectedData is another array that is created by transforming (transforms the array while providing a new reference, thus not modifying the original array) the selectedNodes array and only selecting the data property of each node.
selectedDataStringPresentation is the same, but this time it provides an array of formatted strings by merging the properties make and model of each object from selectedData.

What you probably fail to grasp is the usage of the ES6 (JavaScript standard) functions that are used here, and especially the map() function.

Here is the official documentation of the map() function for arrays : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Simply explained, it is a function that iterates over an array, and transforming each object by applying the function declared in the map, returning the results in a new array.

If you take the example of selectedData, you can translate the operation into this :

Loop over each object of selectedNodes, and return only the property data of the current object. Push the results in a new array.

This is especially useful when you want to work on different arrays that serve different purposes. For example, imagine you have a service that contains a list of objects. A backend service will provide you an array of numbers representing the IDs of the objects you have in your service.

You can then use the map() function to transform the array of IDs into an array of your Objects stored in your service easily.

score 1 · Answer 2 · answered Apr 04 '19 at 13:42

Darn @Alex Beugnet(upvote) beat me to the punch! I'm going to post anyway as I was in the middle of writing it all.

Firstly I'm not sure how much of TypeScript you already know, I apologize if much of these becomes trivial, the purpose is only to ensure maximum clarification to the question in understanding the logic.

In the Enable Selection portion of the guide, you are essentially enabling multiple row selection in the grid and having the button return the data from those selected rows.

In order to see what's happening with the getMultipleRows() function, it would be best to visualize it via the Debugger provided in browsers, I'm using Chrome Developer Tools (hit F12), I would highly recommend it for understanding what is happening in the logic.

const selectedNodes

Let's start by selecting say 2 rows, I have selected the Porsche Boxster 72000 and Ford Mondeo 32000. After selecting them I click on the 'Get Selected Rows' button which triggers the getSelectedRows() function:

const selectedNodes = this.agGrid.api.getSelectedNodes();

The above line is assigning the constant variable 'selectedNodes' the RowNodes from AgGrid. Here you are using the AgGridNg2 method getSelectedNodes() to return the selected node data, which you would be returned an array in the form of:

[RowNode, RowNode] //(each for the row we have selected)

Looking into a RowNode we get:

These are all the RowNode properties provided by the AgGrid framework, you can ignore all of these object properties as you are only concerned with the 'data' property as you'll see in the next line of code!

const SelectedData

const selectedData = selectedNodes.map(node => node.data);

Here we are setting 'selectedData' as an array of RowNode.data, basically trying to get the data property from the RowNodes into an array. The above line can basically be assumed as:

let selectedData = [];

for (let i = 0; i <= selectedNodes.length - 1; i++){
    selectedData[i] = selectedNodes[i].data;
}

In which we are just trying to get the data property into a new constant variable 'selectedData'. Look at the documentation in order to better understand this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const selectedData would be returned as:

[
    {
        make: "Porsche",
        model: "Boxster",
        price: 72000,
    },
    {
        make: "Ford",
        model: "Mondeo",
        price: 32000
    }
]

const selectedDataStringPresentation

const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');

We take the selectedData array and concatenate the Make and Model as a single element for the array and adding a comma in the end. We would get "Porsche Boxter, Ford Mondeo".

let selectedData = [
 {
  make: "Porsche",
  model: "Boxster",
  price: 72000,
 },
 {
  make: "Ford",
  model: "Mondeo",
  price: 32000
 }
]

let selectedDataStringPresentation = [];

for (let i = 0; i <= selectedData.length - 1; i++){
 selectedDataStringPresentation[i] = selectedData[i].make + ' ' + selectedData[i].model;
}

selectedDataStringPresentation = selectedDataStringPresentation.join(', ');

console.log(selectedDataStringPresentation);

alert()

And the last line,

alert('Selected nodes: ${selectedDataStringPresentation}');

You are going to send an alert in the browser that will display the selectedDataStringPresentation array.

How does manipulating multiple checkbox selection code work?

2 Answers2

const selectedNodes

const SelectedData

const selectedDataStringPresentation

alert()