intersection(), difference() and union() Functions in Underscorejs with Example
Repository
intersection(), difference() and union() Functions in Underscorejs with Example
What Will I Learn?
- You will learn what
_.intersection()function in underscorejs - You will learn what
_.difference()function in underscorejs - You will learn what
_.union()function in underscorejs - You will learn what
_.pluck()function in underscorejs - You will learn what
_.each()function in underscorejs
Requirements
Difficulty
- Basic
Tutorial Contents
We will examine the intersection(), difference() and union() functions in the underscorejs library on a close example of real life in this article.
For example, let's keep the students in a school's clubs in my json files. will be students who go to more than one club as well as students who go to a club only. I will separate these differences using the functions I mentioned in the topic.
I will create two clubs first. Swimming club and Football club.
I will prepare the students of these clubs in accordance with the json format and I will create an area where I can add new students in the site.
Finally, I will use the intersection(), difference(), and union() functions with the help of the buttons to separate the students.
I will define these students as objects, but since these functions operate on the array, will only translate the student's name using the pluck() function.
Tutorials Steps
- Defining students in clubs
- Designing the page
- Adding new students to clubs
- intersection operations
- difference operations
- union operations
STEP 1: Defining students in clubs
I will keep the names and numbers of the students in an object and I will create a separate json file for each club.
{
"no":"111",
"name":"onepice1"
}
I will list all these objects in json files, so I can see all the students in a club.
In swimming.json
[
{
"no":"111",
"name":"onepice1"
},
{
"no":"222",
"name":"onepice2"
},
{
"no":"555",
"name":"onepice5"
},
{
"no":"888",
"name":"onepice8"
},
{
"no":"101010",
"name":"onepice10"
},
{
"no":"434343",
"name":"onepice43"
}
]
In football.json
[
{
"no":"111",
"name":"onepice1"
},
{
"no":"333",
"name":"onepice3"
},
{
"no":"555",
"name":"onepice5"
},
{
"no":"888",
"name":"onepice8"
},
{
"no":"999",
"name":"onepice9"
},
{
"no":"434343",
"name":"onepice43"
}
]
so I created the students in the clubs.
STEP 2: Designing the page
I will design our page using the bootstrap library but have to load this library before. I will install it in underscorejs and jquery libraries along with bootstrap.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="script.js"></script>
<title>Document</title>
</head>
In the <div> where I use the jumbotron class, I need to place the necessary inputs for the new student attachment. I also need to place it in the buttons for the functions will use to set up the club statistics for the clubs.
With these buttons I will arrange the students of the union between the two clubs and the different students.
I need to add a <ul> tag to show the resulting lists after the buttons are clicked at the bottom.
Let's design new student adding area
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<label>Student No</label>
<input type="text" class="form-control" id="inputNo"/>
</div>
<div class="form-group">
<label >Student Name</label>
<input type="text" class="form-control" id="inputName"/>
</div>
<div class="dropdown form-group">
<button class="btn btn-default dropdown-toggle" type="button" id="btnClub" data-toggle="dropdown">Clubs
<span class="caret"></span></button>
<ul id="ulClub"class="dropdown-menu">
<li><a href="#">Swimming</a></li>
<li><a href="#">Football</a></li>
</ul>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</div>
</form>
Let's put the buttons
<hr/>
<div class="row">
<div class="col-md-3"><button class="btn btn-success" id="btnIntersection">Intersection</button></div>
<div class="col-md-3"><button class="btn btn-warning" id="btnDifferenceF">Difference Football</button></div>
<div class="col-md-3"><button class="btn btn-warning" id="btnDifferenceS">Difference Swimming</button></div>
<div class="col-md-3"><button class="btn btn-danger" id="btnUnion">Union</button></div>
</div>
</div>
Let's add the list
<div>
<div class="row">
<div class="col-md-12">
<ul class="list-group" id="ulList">
</ul>
</div>
</div>
</div>
</div>
</body>
Screenshot 1
STEP 3: Adding new students to clubs
We can now create a script.js file and write our required jquery code.
$(function(){
//Jquery code
})
We first need to capture which dropdown menus are clicked.
var selectedClub="football";//If no club is selected, you will be choosing football by default
//DropDown capture selected items
$('#ulClub>li>a').click(function(){
selectedClub=$(this).text();
$('#btnClub').text(selectedClub);
})
Define getJSON() function from two json files to get the data.
We will do assign the input values to a student object when the submit button is clicked.
Let's assign the student object to the array according to the selected club.
$.getJSON("football.json",function(dataFootball){//getting data from a json file
$.getJSON("swimming.json",function(dataSwimming){//getting data from a json file
//adding students according to the selected club
$('#btnSubmit').click(function(){
var student={
no:$('#inputNo').val(),
name:$('#inputName').val()
}
if(selectedClub=='Swimming'){
dataSwimming.push(student);
}
if(selectedClub=='Football'){
dataFootball.push(student);
}
})
Let's print the new list.
console.log(dataSwimming);
console.log(dataFootball);
Screenshot 2
add new students
Screenshot 3
Console
STEP 4: intersection Operations
With the _.intersection() method, we can find the students of the intersection .
Because the intersection method only works for an array, we must set the student objects to array. I will use the _.pluck() method to do this. With this function, I will arrange the array according to the students.
When you click the intersection button, first delete the list and run the intersection function.
$('#btnIntersection').click(function(){
$('#ulList').empty();//list cleanup
//students by name
var studentFootball=_.pluck(dataFootball,'name');
var studentSwimming=_.pluck(dataSwimming,'name');
var intersection=_.intersection(studentFootball,studentSwimming);
// I'm writing the result list
_.each(intersection,function(value){
$('#ulList').append('' +value+'')
})
});
Screenshot 4
STEP 5: difference Operations
_.difference function is the difference between two arrays.
I placed two buttons. We can find different students in two clubs.
$('#btnDifferenceF').click(function(){
$('#ulList').empty();
var studentFootball=_.pluck(dataFootball,'name');
var studentSwimming=_.pluck(dataSwimming,'name');
var differenceFootball=_.difference(studentFootball,studentSwimming);
_.each(differenceFootball,function(value){
$('#ulList').append('' +value+'')
})
});
$('#btnDifferenceS').click(function(){
$('#ulList').empty();
var studentFootball=_.pluck(dataFootball,'name');
var studentSwimming=_.pluck(dataSwimming,'name');
var differenceSwimming=_.difference(studentSwimming,studentFootball);
_.each(differenceSwimming,function(value){
$('#ulList').append('' +value+'')
})
});
Screenshot 5
Difference Football
Screenshot 6
Difference Swimming
STEP 6: union Operations
The _.union() function combines two arrays and uses the same elements once.
$('#btnUnion').click(function(){
$('#ulList').empty();
var studentFootball=_.pluck(dataFootball,'name');
var studentSwimming=_.pluck(dataSwimming,'name');
var union=_.union(studentFootball,studentSwimming);
_.each(union,function(value){
$('#ulList').append('' +value+'')
})
});
Screenshot 7