Monday, December 13, 2021

Few Javascript or JQuery Tricks for array and operators

 1) Empty an array

var arr = [10 , 20 , 30 ];
arr.length = 0; // arr will be equal to [].


2) Truncate an array using length

Like the previous example of emptying an array, we truncate it using the length property.

var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90];
arr.length = 4; // arr will be equal to [10, 20, 30, 40].

As a bonus, if you set the array length to a higher value, the length will be changed and new items will be added with undefined as a value. The array length is not a read only property.

arr.length = 10; // the new array length is 10
arr[arr.length - 1] ; // arr [10, 20, 30, 40, 50, 60, 70, 80, 90, undefined];


3)Use logical AND/ OR for conditions

var foo = 10;
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();


4) Comma operator

var a = 10;
var b = ( a++, 99 );
console.log(a);  // a will be equal to 10
console.log(b);  // b is equal to 99


5) Swap variables

let v1 = 'value 1';
let v2 = 'value 2';

[v1,v2] = [v2, v1];
console.log(v1, v2);


Tuesday, September 21, 2021

Calculate date difference using JQuery

Simple way to get days between 2 dates...

Tuesday, August 17, 2021

Cheat Sheet - CSS, JQuery Selectors and Filters


* All elements.
element Basic selector defined by the elements name. IE – the <p> tag.
.class Elements specified by a specific class attribute.
#id Elements specified by the specific ID number.
selector1, selector2 Elements that match more than one selector.
:first First element from the selection.
:last Last element from the selection.
:even Even index selection.
:odd Odd index selection.
:not(selector) Everything except the selector in parentheses.
:eq() Elements with an index number equal to the parameter.
:gt() Elements with an index number greater than the parameter.
:lt() Elements with an index number less than the parameter.
:header All h1 – h6 HTML tags.
:animated Any element being animated.
:focus The element which has focus (an input item such as a field, checkbox, button, or link).
:empty Elements with no children.
:parent Elements that have a child node.
:has(selector) Elements contain atleast one of the elements that match the selector in parentheses.
:contains(‘text’) Elements that contain the specified text in parentheses.
:hidden Elements that are hidden.
:visible Elements that exist and take up space in the layout of the page.
:nth-child(exp) Elements that match the mathematical pattern. IE –  div :nth-child(2+1)
:first-child First child from the current selection.
:last-child Last child from the current selection.
:only-child The only existing child of the matching element.
[attribute] Elements that have the specified attribute value – IE – [name^ = “value”]
:input Elements with input.
:text Elements with text.
:password Elements with password inputs.
:radio Elements with radio buttons.
:checkbox Elements with checkboxes.
:submit Elements with submit buttons.
:image Elements with images.
:reset Elements with reset buttons.
:button All buttons.
:file Elements with file inputs.
:selected All items from drop-down lists.
:enabled All enables elements, including defaults.
:disabled All disables elements.
:checked All checked checkboxes or radio buttons.

If there’s anything that I’ve missed or more explanation that you’d like to see, feel free to leave a comment.

Help other's to help yourself !!

Wednesday, May 5, 2021

Export HTML table to Excel file

<!-- https://github.com/linways/table-to-excel -->

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>


function exportReportToExcel(c) {

  let table = $("#feedbackExport2Excel"); // you can use document.getElementById('tableId') as well by providing id to the table tag

  let fileName = "Feedback";

  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag

    name: `${fileName}.xlsx`, // fileName you could use any name

    sheet: {

      name: 'Sheet 1' // sheetName

    }

  });

}//exportReportToExcel


Wednesday, February 3, 2021

Simple way to find Index value from JSON Array

Simple way to find Index value from JSON Array 


var data = [{"name":"placeHolder","section":"right"},{"name":"Overview","section":"left"},{"name":"ByFunction","section":"left"},{"name":"Time","section":"left"},{"name":"allFit","section":"left"},{"name":"allbMatches","section":"left"},{"name":"allOffers","section":"left"},{"name":"allInterests","section":"left"},{"name":"allResponses","section":"left"},{"name":"divChanged","section":"right"}];

var index = data.findIndex(obj => obj.name=="allInterests");

console.log(index);

Tuesday, February 2, 2021

Add days to a Date using JavaScript

Many times I have face this issue, and hope you too.. this is simple 3 line of code will help and fix this problem.


let days =7 ; // we are going to add 7 days to a date

let cdt = new Date('2021-01-10'); // your date value

let tdt = cdt.setTime(cdt.getTime() + (days * 24 * 60 * 60 * 1000)); // calculation for adding 7 days and adding to time

let targetDT = new Date(tdt).format("yyyy-MM-dd"); // converting back from time to date 

// Output for targetDT will be "2021-01-17"


// With function...

function addDays(theDate, days) {
    return new Date(theDate.getTime() + days*24*60*60*1000);
}

var newDate = addDays(new Date(), 5);


Hope this will help you...

Thursday, January 28, 2021

JavaScript to get index from a JSON object with value

 In modern browsers you can use findIndex:

But this function is not supported by even not so old versions of a few browser as well as in IE (EDGE supports it). So below is a workaround using javascript: You can use either Array.forEach or Array.find or Array.filter

This method takes little more overhead as it loops through the whole object to search for the match. So, for lengthy JSON data, this method is not suggested(even though it gets the work done).