Using Data Grouping and Dropdown with Jquery and Underscorejs
Repository
Using Data Grouping and Dropdown with Jquery and Underscorejs
What Will I Learn?
- You will learn creating a dropdown using bootstrap
- You will learn interacting with dropdown using jquery
- You will learn how to access the data in the
Json
file - You will learn array grouping with
groupBy()
function in underscorejs - You will learn
keys()
function in underscorejs to get to the key of data - You will learn edit the collections according to a specific criterion with the
where()
function in underscorejs
Requirements
Difficulty
- Intermediate
Tutorial Contents
I will create a json file in this article and will put dropdown lists in the page by grouping the data in this file then I will bring this data in the dropdown lists based on the selected criteria to the screen.
Thus, at the end of this article, you can read the data in the json file, group the data according to the specific fields, interact with the drop-down lists, and list the data according to specific fields.
I will break up the page to make it easier to understand what I'm doing.
- Design page
- Reading json file
- Data grouping and fill in dropdowns
- Select element from dropdown
- Listing data according to certain criteria
I'll use bootstrap for page design, and use bootstrap.js to set the dropdowns. I will use the underscorejs where()
function to group the data and the underscorejs functions for other operations.
To use these libraries, place the cdn on the index.html page.
<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="underscore.js"></script>
<script src="script.js"></script>
<title>Where</title>
</head>
STEP 1: Design Page
I'm thinking of placing two dropdowns and one button on the page.
I have planned to show the data with the bootstrap panel because the data will be listed according to the criteria selected by the dropdown when the button is clicked.
The dropdown
class is used to create a dropdown in bootstrap.
We can place a <button>
and a <ul> <li>
tags inside by defining a <div>
that uses this class.
We need to use the dropdown-toggle
class as well as classes that provide button properties for the button class also button needs to be set to data-toggle = "dropdown"
to show dropdown properties.
I can create a down arrow with the caret
class.
We need to use the dropdown-menu
class to host the <ul>
tag in dropdown menues.
Let's create our page
<body>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="btnGender" data-toggle="dropdown">Genders
<span class="caret"></span></button>
<ul class="dropdown-menu" id="ulGender">
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="btnTask" data-toggle="dropdown">Tasks
<span class="caret"></span></button>
<ul class="dropdown-menu" id="ulTask">
</ul>
</div>
</div>
<div class="col-md-4">
<button class="btn btn-success" id="btnSubmit">Submit</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel-group" id="pnl">
</div>
</div>
</div>
</div>
</body>
Screenshot 1
I did not use the dropdown <li>
tags because I will use them after I have access to the data.
I use one panel-group, which is why we will use more than one panel will place panels into this panel group.
STEP 2: Reading json file
I will use the json file to host the data. I have to design a json file as an array because my data is an object and there are multiple objects.
I will create name, task, age and gender information in the object.
Let's create one staff.json file and create 5 of these objects in json file.
[
{
"name":"onepice",
"task":"manager",
"age":45,
"gender":"male"
},
{
"name":"onepice2",
"task":"developer",
"age":25,
"gender":"male"
},
{
"name":"onepice3",
"task":"developer",
"age":40,
"gender":"female"
},
{
"name":"onepice4",
"task":"data analyst",
"age":19,
"gender":"male"
},
{
"name":"onepice5",
"task":"designer",
"age":37,
"gender":"female"
}
]
I created a file in json format. I'll use jquery ajax to read the files there.
With the getJSON()
function we can access the data in json file.
The getJSON()
function requires two parameters. the first parameter is the path to the json file to be accessed. The second parameter is a callback function that we can access from here.
Let's use this function in script.js
file and print the data to console.
$.getJSON('./staff.json',function(data){
console.log(data);
})
Screenshot 2
so that you can access the object array in the data
variable and the data holds a list of variables.
STEP 3: Data Grouping and Fill in Dropdowns
I want to group the data by gender
and task
area. I can place them in the dropdown according to these groups.
I can use the underscorejs groupBy()
function to perform the grouping operation. Array into this function is grouped according to a specific criterion.
Let's do a grouping for the gender field and see what happens.
var genderList=_.groupBy(data,function(value){
return value.gender;
})
console.log(genderList);
Screenshot 3
I have grouped them into gender characteristics as it is understood from here, and these genders were included as keys
.
I can use these keys for dropdown and can use the underscore keys()
function to access keys in a data list.
var genders=_.keys(genderList);
console.log(genders);
Screenshot 4
We can now use the each()
function in the genders array to fill in the dropdown list.
I can add <li>
tags to the <ul>
tag using the append()
function.
_.each(genders,function(value){
$('#ulGender').append('<li><a href="#">'+value+'</a></li>');
})
Thus I filled in the dropdown list for the gender.
I will do the same for the task
dropdown list.
var taskList=_.groupBy(data,function(value){
return value.task;
})
var tasks=_.keys(taskList);
_.each(tasks,function(value,index){
$('#ulTask').append('<li><a href="#">'+value+'</a></li>');
})
Screenshot 5
STEP 4: Select Element From Dropdown
When we choose to place DropDown elements like this, we will make a selection according to a certain criterion.
The end user may not always be asked for certain criteria, and all the genders can use it to select within the whole task.
We must set the first element of the dropdown menus to All
for this. I will make this adjustment immediately after the page loads
$('#ulGender').append('<li><a href="#">All</a></li>');
$('#ulTask').append('<li><a href="#">All</a></li>');
I set the dropdowns to <ul> <li> <a>
set the appropriate menus for the syntax so when we click on a menu we actually click on the <a>
tag.
If I clicked the <a>
tag, I will type a variable on this link text. I will also set the value of this dropdown button to this text.
$('#ulGender>li>a').click(function(){
selectedGender=$(this).text();
$('#btnGender').text(selectedGender);
})
$('#ulTask>li>a').click(function(){
selectedTask=$(this).text();
$('#btnTask').text(selectedTask);
})
Let's set the initial value of these variables to All
so that we get the whole list without clicking any dropdown button.
var selectedGender='All';
var selectedTask='All';
Screenshot 6
STEP 5: Listing Data According to Certain Criteria
We can now write down when the button is clicked.
I set up a panel to write the list. I have to unload this panel immediately after clicking on the button so that when the button is clicked again the new list will not come under the old list.
The underscore where()
function takes an array and designates that array from scratch according to a certain criterion and criterias.
Since there are two dropdowns, we need to think that they can be picked separately.
Let us edit the where()
function according to different criteria and assign another array to the result.
When the required completion is over, let's write the panel header and panel contents using the append()
function.
$('#btnSubmit').click(function(){
$('#pnl').empty();
var whereList;
if(selectedGender=='All'&&selectedTask=='All'){
whereList=data;
}else{
if(selectedGender=='All'){
whereList=_.where(data,{task:selectedTask});
}else{
if(selectedTask=='All'){
whereList=_.where(data,{gender:selectedGender});
}else{
whereList=_.where(data,{gender:selectedGender,task:selectedTask});
}
}
}
_.each(whereList,function(value){
$('#pnl').append('<div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-md-6"><b>name: </b>'+value.name+'</div><div class="col-md-6"><b>age: </b>'+value.age+'</div></div></div><div class="panel-body"><div class="row"><div class="col-md-6"><b>gender: </b>'+value.gender+' </div><div class="col-md-6"><b>task: </b>'+value.task+'</div> </div> </div> </div> ');
})
})
Screenshot 7
First when the button is clicked
Screenshot 8
When gender is selected all and task developer
Screenshot 9
When gender male is selected and task all is selected
Screenshot 10
When the gender female is selected and the task developer is selected.
Proof of Work Done
https://github.com/onepicesteem/using-data-grouping-and-dropdown-with-jquery-and-underscorejs
Thank you for your contribution.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Congratulations @onepice! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
You got your First payout
Award for the total payout received
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOP
Do not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - Home stretch to the finals. Do not miss them!
Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes
Hey @onepice
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!