how to find duplicate item from array using multiple object keys in angular or javascript

 how to find duplicate item from array using multiple object keys


There is a way to find based of multiple key find duplicate records in angular or javascript

 
getDuplicate(itemskeys) {
        let duplicates = [];
        for (let i = 0i < items.lengthi++) {
            let matchkey = 0;
            for (let j = 0j < keys.lengthj++) {
                if ((i < (items.length - 1)) && items[i + 1][keys[j]].toLowerCase() === items[i][keys[j]].toLowerCase()) {
                    matchkey++;
                }
            }
            if (matchkey === keys) {
                duplicates.push(items[i]);
            }
        }
        return duplicates;
    }

Example:
const duplicatethis.getDuplicate(CounterParty, ['OperatorId''TCID']);

















angular form control and formarray sort using perticular key asc and desc

 angular form control and formarray sort using perticular key asc and desc





there are three diffrent way to sort data form control and form array in angular 

1). FormArray sorting
   
 sortFormArray(arrayanyargstype = 'asc') {
        if (array !== undefined) {
            return array.controls.sort((aanybany=> {
                const aValue = a.controls[args].value;
                const bValue = b.controls[args].value;
                let condition1 = aValue > bValue;
                let condition2 = aValue < bValue;
                if (type === 'asc') {
                    condition1 = aValue < bValue;
                    condition2 = aValue > bValue;
                }
                if (condition1) {
                    return -1;
                } else if (condition2) {
                    return 1;
                } else {
                    return 0;
                }
            });
        }
        return array;
    }

Example:
const Address= FormArray();
sortFormArray(Address'CountryID','asc');


2).sort list data  getsort(List?) {
        if (List) {
            return List.sort((ab=> (a > b) ? 1 : -1);
        } else { return null; }
    }

Example:

getsort(this.items);
getsort(this.items);



3).sorting using lodash    getsortNew(List?,key:[],type:[]) {
        if (List) {
            return lodash.sortBy(List, key,type);
        } else { return null; }
    }

Example:
getsortNew(this.items,['CountryID'],[asc]);
getsortNew(this.items,['CountryID'],[desc]);













how to convert json to xml in angular

 how to convert json to xml in angular



var obj={'name':raj,'address':{'add':'skg'}}


 JsontoXML(obj) {
    var xml = '';
    for (var prop in obj) {
      xml += obj[propinstanceof Array ? '' : "<" + prop + ">";
      if (obj[propinstanceof Array) {
        for (var array in obj[prop]) {
          xml += "<" + prop + ">";
          xml += this.JsontoXML(new Object(obj[prop][array]));
          xml += "</" + prop + ">";
        }
      } else if (typeof obj[prop] == "object") {
        xml += this.JsontoXML(new Object(obj[prop]));
      } else {
        xml += obj[prop];
      }
      xml += obj[propinstanceof Array ? '' : "</" + prop + ">";
    }
    var xml = xml.replace(/<\/?[0-9]{1,}>/g'');
    return xml
  }

and finally download json into file 

 downloadXMLFile(xmltradeID) {
    const blob = new Blob([xml], { type: 'application/xml;charset=UTF-8' });
    FileSaver.saveAs(blobtradeID + '.xml');

  }




How to convert xml to json in angular

How to convert xml to json in angular




There are many times you required to convert  json from xml and dowloard in json file . there is custom code for generate json from xml 

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
@Injectable({
  providedIn: 'root'
})
export class XmlToJsonService {

  constructor() { }
  xmlToJson(xml) {

    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) { // element
      if (xml.attributes.length > 0) {
        obj = {};
        for (var j = 0j < xml.attributes.lengthj++) {
          var attribute = xml.attributes.item(j);
          obj[attribute.nodeName] = attribute.nodeValue;
        }
      }
    } else if (xml.nodeType == 3) { // text
      obj = xml.nodeValue;
    }

    // do children
    if (xml.hasChildNodes()) {
      for (var i = 0i < xml.childNodes.lengthi++) {
        var item = xml.childNodes.item(i);
        var nodeName = item.nodeName;
        if (typeof (obj[nodeName]) == "undefined") {
          if (nodeName == '#text') {
            obj = this.xmlToJson(item);
          } else {
            obj[nodeName] = this.xmlToJson(item);
          }
        } else {
          if (typeof (obj[nodeName].push) == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(this.xmlToJson(item));
        }
      }
    }
    return obj;
  };

  downloadFile(jsonObject, tradeID) {
    const blob = new Blob([JSON.stringify(jsonObject)], { type: 'application/json' });
    FileSaver(blob, tradeID + '.json');
  }
}


and there is way to call this method

getJson(itemany) {
    console.log(item);
    this.contractService.GetTradeDetail(item.TradeIDitem.IDthis.userId'WithPrevious').then((resany=> {
      if (res['status'] === 200) {
        this.EditForm(res).then((xdata=> {
          const parser = new DOMParser();
          const isDownload = true;
          const xml = '<root><my>hello</my></root>';
          const XMLString = parser.parseFromString(xml"text/xml");
          const JSONString = this.xmlToJsonService.xmlToJson(XMLString);
          if (isDownload) {
            this.dealFastXMLService.generateXml(this.trademodeltrueisDownload);
            this.xmlToJsonService.downloadFile(JSONStringthis.trademodel.ReferenceNo);
          }
          
        });
      }
    });
  }

How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

How to create Textbox auto size and after type some line autometically added scroll 



How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

Code:-


// Usage example: <textarea autoresize></textarea>

import { ElementRefHostListenerDirectiveAfterContentChecked } from '@angular/core';

@Directive({
    selector: 'textarea[autosize]'
})

export class AutosizeDirective implements AfterContentChecked {
    @HostListener('input', ['$event.target'])
    onInput(textAreaHTMLTextAreaElement): void {
        this.adjust();
    }
    constructor(public elementElementRef) {
    }
    ngAfterContentChecked(): void {
        this.adjust();
    }
    adjust(): void {
        const element = this.element.nativeElement;
        const maxsize = 188;
        const bottompadding = 1;
        if (element.scrollHeight <= maxsize) {
            element.style.overflow = 'hidden';
            element.style.height = 'auto';
            element.style.height = (element.scrollHeight - bottompadding) + 'px';
        } else {
            element.style.overflow = 'auto';
            element.style.height = maxsize + 'px';
        }
    }
}


Uses:-
 <textarea matInput placeholder="Address" cols="20" id="Address" name="Address" formControlName="Address"
                  rows="1" maxlength="500" autosize></textarea>

How to Create Lowercase convert autometically in angular using directive (for textbox , text control)

 How to Create Lowercase convert autometically in angular using directive 


1).Directive code 

// Usage example: <input lowercasedirective />


import { ElementRefHostListenerDirectiveAfterContentChecked } from '@angular/core';

@Directive({
    selector: 'input[lowercasedirective]'
})

export class LowercaseDirective implements AfterContentChecked {

    @HostListener('keyup', ['$event.target'])

    onInput(inputHTMLInputElement): void {
        this.lowercase();
    }
    constructor(public elementElementRef) {
    }
    ngAfterContentChecked(): void {
        this.lowercase();
    }

    lowercase(): void {
        const element = this.element.nativeElement;
        if (element.value != null && element.value != '') {
            element.value = element.value.toLowerCase();
        }

    }
}


How to use in html
2).Use in html 
 <input matInput type="text" [readonly]="false" formControlName="EmailID" id="EmailID"
                  name="EmailID" class="form-control" maxlength="50" lowercasedirective />

2).Import in Moduel
a).declare
import {LowercaseModule } from '../../../directive/lowercase/lowercase.module';

b).import
LowercaseModule 


How to auto load data on mat-select scroll (mat-select infinite scroll)

 How to auto load data on mat-select scroll (mat-select infinite scroll)




step1 :Install plugins

npm i ng-mat-select-infinite-scroll


reference side:

https://dev.to/haidarz/adding-infinite-scroll-functionality-to-angular-material-select-component-1lho


step2:declare path 

import { BehaviorSubject, Observable } from 'rxjs';

import { scan } from 'rxjs/operators';


step3:declare variables

limit = 10;

offset = 0;

options = new BehaviorSubject<string[]>([]);

options$: Observable<string[]>;

 

step4:call observable on constructor

this.options$ = this.options.asObservable().pipe(

scan((acc, curr) => {

return [...acc, ...curr];

}, [])

);


step5:call method when require for initialise like on init()

this.getTapCodeList();

step6:write defination of method

getNextBatch() {

    const result = this.tapCodeList.slice(this.offset, this.offset + this.limit);

    this.options.next(result);

    this.offset += this.limit;

  }

  

step7:api call for data


 getTapCodeList(): Promise<any> {

    return new Promise((resolve, reject) => {

      const _tradingEntityID = this.newTradeIOTForm.get('TradingEntityID').value;

      this.tadigcodeservice.getTadigCode(_tradingEntityID, '00000000-0000-0000-0000-000000000000', 'All', this.userId)

        .then(res => {

          const _tempData = res.result.AllTadigCode;

          if (_tempData) {

            this.tapCodeList = _tempData.map(function (ele) {

              return { 'TadigId': ele.TadigId, 'TadigCode': ele.TadigCode };

            });

          }

          this.getNextBatch();

        })

        .catch(error => {

          this.loggerService.error(error);

        });

      this.counterPartyList = [];

      return resolve(this.tapCodeList);

    });

  }


step 8: html side changes


                <div class="full-width space-grp ">

                      <mat-form-field class="full-width">

                        <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" multiple

                          formControlName="CounterPartyTapCode" [complete]="offset === data?.length"

                          (selectionChange)="changeTapCode($event, true)">

                          <mat-option *ngFor="let option of options$ | async" [value]="option.TadigId">

                            {{option.TadigCode}}</mat-option>

                        </mat-select>

                        <mat-placeholder>Select TAP Code<span class="raw-red">*</span>

                        </mat-placeholder>

                      </mat-form-field>

                    </div>

'ng' is not recognized as an internal or external command/angular cli ng commands not working

 'ng' is not recognized as an internal or external command / angular cli ng commands not working



In this post, I’m going to list the most common errors you may encounter while getting started with Angular. For each error, I’m going to explain what it means and how to solve it

This error is simply telling you that Angular CLI is either not installed or not added to the PATH. To solve this error, first, make sure you’re running Node latest or higher. A lot of errors can be resolved by simply upgrading your Node to the latest stable version

1).Open up the Terminal on macOS/Linux or Command Prompt on Windows and run the following command to find out the version of Node /node package manager / angular cli
a).node js version
    node --version 
    node -v

a).node package manager version
    npm -v

c).angular cli version
    ng v
2).Then you need to install angular cli at globally
    npm install -g @angular/cli

3). then also note run the you should set up your local computer envarment path

















Featured Post

How to sent authorized header attribute value using c# .net httpclient for third party api call of oauth 2.0

How to sent authorized header attribute value using C# .NET HTTP client for third party API call of OAuth 2.0 For call token From Authorized...

Popular Posts