Deep Clone Object Using JavaScript
Posted on June 30, 2021
|
How to Deep Clone an Object Using JavaScript ?
You can use Lodash library to deep clone an object.
Start by importing the library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> Once you have the library, you can use cloneDeep method to clone the original object.
let originalObj = { keys: [1, 2, 3], empInfo: { firstName: 'jay', lastName: 'raj', age: 10 } }; let clonedObj = _.cloneDeep(originalObj); clonedObj.empInfo = null; console.log('Original object is ', originalObj); console.
[Read More]
JS isArray | Check if Variable is Array | JavaScript
Posted on June 30, 2021
|
JavaScript isArray. Check if Variable is Array ?
Sometimes, you need to check a parsed JSON object or a variable to see if it’s an array before iteration or before any other manipulation.
You can use the Array.isArray method to check if a variable is an array.
let jsonData = { employees : [{ firstName : 'Sam' },{ firstName : 'Roy' },{ firstName : 'Som' }] }; if(jsonData && Array.isArray(jsonData.employees) && jsonData.
[Read More]
Set Default Value of Dropdown | Angular
Posted on June 30, 2021
|
Set Default Value of Dropdown in Angular.
Let’s have a look at how you can set default value in Angular dropdown.
Template Driven Forms While using template driven forms, let’s say your app.component.html looks like:
<mat-select placeholder="Select price" [(ngModel)]="selectedValue" name="item"> <input [(ngModel)]="searchTxt" matInput placeholder="search"> <mat-option *ngFor="let item of items | search : searchTxt" [value]="item.value"> {{item.viewValue}} </mat-option> </mat-select> Here is how the app.component.ts file looks:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: '.
[Read More]
Access This In JavaScript
Posted on June 21, 2021
|
How to access this inside callback in JavaScript ? How to access this inside forEach in JavaScript ?
Access this inside callback There are couple of ways to access this inside a callback function. Let’s first write some code which makes use of callbacks. I’m going to use forEach method to iterate over an array.
function DataModule(){ this.multiplier= 2; this.alterData = function(dataArr){ dataArr.forEach(function(data, index){ dataArr[index] = data * 2; }) return dataArr; } } let obj = new DataModule(); console.
[Read More]
Angular Material Select | Dropdowns in Angular
Posted on June 21, 2021
|
How to use Angular Material Select ? Dropdowns in Angular.
Create an angular app using the angular cli.
ng new angular-select Once you have the Angular application, install Angular Material to your application.
Next, import the MatSelectModule to your app.module.ts file.
import { MatSelectModule } from '@angular/material/select'; Also make sure to add FormsModule if you plan to use ngModel.
import { FormsModule } from '@angular/forms'; Import FormsModule and MatSelectModule to the imports array in app.
[Read More]
JavaScript Map To Array
Posted on June 21, 2021
|
How to convert JavaScript Map to Array?
Let’s first create a map using JavaScript,
let jsMap = new Map(); jsMap.set('1', 'Mumbai'); jsMap.set('100', 'Delhi'); jsMap.set(102, 'Samba'); You can use keys, values and entries method on map object jsMap to get the key, values or key,value combined as an entry from the Map.
keys, values and entries methods returns iterables.
You can use Array.From to convert JavaScript Map to Array.
let jsMap = new Map(); jsMap.
[Read More]
Make API Call From Angular | Connect Angular to Node REST API
Posted on June 21, 2021
|
How to make an API call from Angular ? Connect Angular app to Node REST API.
Import HttpClientModule Start by importing HttpClientModule in your app.module.ts file.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the HttpClient in the component or service from where you are making the API call.
[Read More]
Mock Service Using SpyOn | Angular Unit Testing | Karma | Jasmine
Posted on June 21, 2021
|
How to use spyOn in Angular Unit Testing? How to mock a service in Angular Unit Testing ?
Here is your component code that you want to unit test.
import { Component } from '@angular/core'; import { DataServiceService } from '../app/data-service.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angu-unit-test'; constructor(private dataService : DataServiceService){} count = 0; config = {}; data; calculate(a,b){ this.count = (a * b) + 100 return this.
[Read More]
Python Ternary Operator
Posted on June 21, 2021
|
Python Ternary Operator. Let’s see how to use ternary operator in Python.
Assuming this is your Python code :
value = True
if value:
print "Value found"
else:
print "No value found"
Here is how you can use ternary operator for the above code,
value = True
msg = "Value found" if value else "No value found"
print msg
Refactor Nested If JavaScript
Posted on June 21, 2021
|
How to Refactor Nested If in JavaScript ?
Instead of creating nested if statements, you can simply return. Let’s take an example.
Assuming you have a code as shown :
function doStuff(a) { if (a > 10) { if (a > 400) { return 400; } else if (a > 100) { return 100; } else { return 1000; } } else { return 0; } } The first if statement can be converted into a one liner by simply using return,
[Read More]