Merge objects using $.extend() in jQuery

Have you ever come across a requirement in which you need merge many objects in one object? Okay let me clarify question in simpler words. Assume you have two objects as given below. object1 is defined as below,


var object1 = {
 red: 0,
 blue: { lightblue: 24, darkblue: 12 },
 black: 17
 };

And another object is object2.


var object2 = {
 white: 200,
 blue: {lightblue:40}
 };

Let us say you have to merge object2 in object1. Here merge means merging properties of object2 in object1. You can do this in jQuery using extend() function.


$.extend(object1, object2);
 console.log(object1);

 

Let us say you have to merge object2 in object1. Here merge means merging properties of object2 in object1. You can do this in jQuery using extend() function.

Now if you go ahead and view console you see following output. As you can see value for blue property in object1 has been changed with the value of object2’s blue property.

image

This is the way $.bind() merge two objects in jQuery. There could be another scenario in which you want to merge objects recursively. Recursively means property value which is unique in target object will persist. For recursive binding you need to set first parameter as True.

 $.extend(true,object1, object2);
 console.log(object1);

In output you can see that now blue property of object1 has darkblue and lightblue both. Value of darkblue has been modified with object2 property value.

image

You can merge more than two objects as below and always remember that $.bind returns target object as output,


var object1 = {
 red: 0,
 blue: { lightblue: 24, darkblue: 12 },
 black: 17
 };
 var object2 = {
 white: 200,
 blue: { lightblue: 40 }
 };

 
 var object3 =
 {
 yellow: 234
 };
 var targetresult = $.extend({}, object1, object2, object3);
 console.log(targetresult);

 

In this way you can merge objects in JavaScript using jQuery $.bind() function. I hope you find this post useful. Thanks for reading.

Two common tasks using jQuery

In this post we will take a look on how to perform two common tasks using jQuery . We will see how following tasks can be performed,

  1. Reading and setting text of label
  2. Reading value of selected item from drop down

Reading and setting text of label

Let us say you have label on HTML as following,


<label id="locationbox"> </label>

You can read value as following ,


var valueoflabel = $('#locationbox').text();

You can set text in label as following,


$('#locationbox').text("MyText");

Reading value of selected item from drop down

Let us say you have drop down as following on html,


<select id="typeofreport">
<option value="Rape">Rape</option>
<option value="EveTeasing">Eve Teasing</option>
<option value="Molestation">Molestation</option>
<option value="VerbalAbuse">Verbal Abuse</option>
<option value="Harassmentatwork">Harassment at work</option>

</select>

You can read text of selected value of drop down as following ,


var typeofincident = $("#typeofreport option:selected").text();

These are the two tasks I wanted to share with you. I hope you find this small blog post useful. Thanks for reading.

Learn jQuery Part4: Increasing and Decreasing font of paragraph text using jQuery

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery


In this post we will learn applying CSS on HTML Elements using jQuery. On click of event of button we will increase or decrease FontSize of the text. See the below video for the expected output

You may come across scenario when you need to apply CSS styling on DOM element at the run time. For example on click event of button you may want to increase or decrease font size of the Paragraph Text. jQuery allows to apply or remove CSS on HTML elements.

image

Assume we have HTML as following. There are two buttons on the HTML, one to increase the font of the text in paragraph element and another to decrease the font size.

Code Listing 1


<body>
<h1>CSS styling using jQuery</h1>
<p id="infopara">
Cricket is a bat-and-ball game played between two teams of 11 players on a field,
at the centre of which is a rectangular 22-yard long pitch. One team bats,
trying to score as many runs as possible while the other team bowls and fields,
trying to dismiss the batsmen and thus limit the runs scored by the batting team.
A run is scored by the striking batsman hitting the ball with his bat,
running to the opposite end of the pitch and touching the crease there without being dismissed.
The teams switch between batting and fielding at the end of an innings.
</p>
<button id="btnincreasefont" type=button onclick="">Increase Font</button>
<button id="btndecreasefont" type=button onclick="">Decrease Font</button>
</body>

In browser you should get rendered HTML as following

image

Now on the click event of the buttons we want to increase and decrease the font size of the paragraph text. First attach a click event to the button. Click event can be bind to button as below,

image

After attaching click event to button we need to read current font size of the text. To read that value select HTML element <p> with id and apply css selector with fontSize attribute to read current font size applied. You can read current font size as given below

image

If you alert divcurrentfont , you will get font size as following

image

Now we need to convert current font size to an integer value and we can do that as following

image

If you alert divcurrentfontinnumber, you will get integer part of font size as following

image

Next we need to extract unit part of font. We can do that as following

image

On alert you will get unit as following

image

After this we need to modify font size value as per our requirement. In this case I am going to increase font size twice with each button click. We can multiply font size by 2 as following

image

Last but not least we need to set fontSize value. To do this select element with id and set fontSize argument in css function. We can set fontSize as following

image

On consolidating codes from above discussion we may have following jQuery code to increase font size of paragraph text on click event of button.

image

To decrease font size we need to follow same steps but rather than multiplying font size by 2, we will divide by 2.

image

Find full jQuery source code to increase and decrease the font size in CodeListing2. CodeListing1 is used as HTML for CodeListing2.

CodeListing2


<script type="text/javascript">
$(document).ready(function () {
$('#btnincreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseInt(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber *= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});

$('#btndecreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseFloat(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber /= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});
});
</script>

I hope you find this post useful. You may find previous posts of this series useful too.

 

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery

 

Thanks for reading.