Using Data Grouping and Dropdown with Jquery and Underscorejs

onepice(60)

Published in

#utopian-io

Words

1062

Reading

5 min

Listen

Play

Repository

Jquery in GitHub

UnderscoreJs in GitHub

My GitHub Profile

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

Visual Studio Code in GitHub

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(''+value+'');
})

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(''+value+'');
        })

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('All
');
    $('#ulTask').append('All
');

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('name: '+value.name+'age: '+value.age+'gender: '+value.gender+' task: '+value.task+'    ');

            })
        })