I am attempting to gather user input for an array while also ensuring that duplicate values are being checked

Question

I am attempting to gather user input for an array while also ensuring that duplicate values are being checked

Can someone assist me with the following issue: https://stackblitz.com/edit/duplicates-aas5zs?file=app%2Fapp.component.ts,app%2Fapp.component.html I am having trouble finding duplicate values and displaying them below. Any guidance would be appreciated.

I am new to working with arrays, so I could use some assistance. I have already searched on Google but haven't found a solution yet...

arrays angular typescript duplicates

Answer 1

Answer №1

Are you looking to input numbers and identify duplicates within the list?

Or are you seeking a method to find duplicated numbers within an Array?

Furthermore, considering you are already utilizing ngModel, there is no necessity for an additional 'includes' input as the value is readily accessible in your logic (.ts file).

Answer 2

Are you looking to input numbers and identify duplicates within the list?

Or are you seeking a method to find duplicated numbers within an Array?

Furthermore, considering you are already utilizing ngModel, there is no necessity for an additional 'includes' input as the value is readily accessible in your logic (.ts file).

Answer 3

Answer №2

There appears to be an issue:

This solution only works for single digit numbers, ranging from 0 to 9, and does not account for two-digit numbers like "10".

If you simply need to find duplicate digits:

In your .ts file, create a new method (or modify an existing one):

inputNumbersString = '';
duplicatesResult = [];

findDuplicates(): void {
  const arrOfDigits = Array.from(String(this.inputNumbersString), Number);
  this.duplicatesResult = arrOfDigits.filter(
    (item, index) => index !== arrOfDigits.indexOf(item)
  );
  console.log(this.duplicatesResult);
}

Since the input tag returns a string, you must convert it to a number, separate the digits, check for duplicates, and then display them using console.log. Make sure to store the result in the "duplicatesResult" variable for use in your HTML.

In your HTML:

Remove the ng-container and *ngFor that wraps the input, as they will generate unnecessary inputs for each element in the array.

Here is your updated input field and button. Clicking the button will invoke the findDuplicates function. Note that an input value is not required, as all necessary data is already present in the .ts file:

<input [(ngModel)]="inputNumbersString" placeholder="Enter numbers here" />
<button (click)="findDuplicates()">FIND DUPLICATES</button>
<span>{{ duplicatesResult }}</span>

The span tag will display the output.

If desired, you can re-enable the "checked" feature by checking the length of duplicatesResult.

Answer 4

There appears to be an issue:

This solution only works for single digit numbers, ranging from 0 to 9, and does not account for two-digit numbers like "10".

If you simply need to find duplicate digits:

In your .ts file, create a new method (or modify an existing one):

inputNumbersString = '';
duplicatesResult = [];

findDuplicates(): void {
  const arrOfDigits = Array.from(String(this.inputNumbersString), Number);
  this.duplicatesResult = arrOfDigits.filter(
    (item, index) => index !== arrOfDigits.indexOf(item)
  );
  console.log(this.duplicatesResult);
}

Since the input tag returns a string, you must convert it to a number, separate the digits, check for duplicates, and then display them using console.log. Make sure to store the result in the "duplicatesResult" variable for use in your HTML.

In your HTML:

Remove the ng-container and *ngFor that wraps the input, as they will generate unnecessary inputs for each element in the array.

Here is your updated input field and button. Clicking the button will invoke the findDuplicates function. Note that an input value is not required, as all necessary data is already present in the .ts file:

<input [(ngModel)]="inputNumbersString" placeholder="Enter numbers here" />
<button (click)="findDuplicates()">FIND DUPLICATES</button>
<span>{{ duplicatesResult }}</span>

The span tag will display the output.

If desired, you can re-enable the "checked" feature by checking the length of duplicatesResult.

Answer 5

Answer №3

I am a bit confused by the "NaN" part, but here is a script to check for multiple occurrences:

.html

<input [(ngModel)]="inputString" placeholder="Enter digits here" />
<button (click)="findOccurrenceWanted()">Check if there are more than {{ occurrenceToCheck }} occurrences</button>
<div *ngFor="let result of resultsArray">
  <span>{{ result }}</span>
</div>

.ts

export class AppComponent {
  name = 'Angular 5';
  private inputString = '';
  private alreadyCheckedDigits: any[] = []; 
  private occurrenceToCheck = 3; 
  public resultsArray = []; 

  findOccurrenceWanted(): void {
    const inputStringIntoArray = Array.from(this.inputString);

    inputStringIntoArray.forEach((digit) => {
      if (!this.alreadyCheckedDigits.includes(digit)) {
        const occurrenceCounter = this.inputString.split(digit).length - 1; 

        this.alreadyCheckedDigits.push(digit); 

        if (occurrenceCounter >= this.occurrenceToCheck) {
          this.resultsArray.push(digit);
        }
      }
    });
  }
}

Essentially, you specify the number of occurrences to check using the occurrenceToCheck variable, then when you click the button, the script checks each digit's occurrence in the string provided by the user and stores the result in the resultsArray. It also ensures that each digit is only checked once using the alreadyCheckedDigits array.

This script can now work with letters and all kinds of digits, not just numbers.

I hope this explanation helps!

Answer 6

I am a bit confused by the "NaN" part, but here is a script to check for multiple occurrences:

.html

<input [(ngModel)]="inputString" placeholder="Enter digits here" />
<button (click)="findOccurrenceWanted()">Check if there are more than {{ occurrenceToCheck }} occurrences</button>
<div *ngFor="let result of resultsArray">
  <span>{{ result }}</span>
</div>

.ts

export class AppComponent {
  name = 'Angular 5';
  private inputString = '';
  private alreadyCheckedDigits: any[] = []; 
  private occurrenceToCheck = 3; 
  public resultsArray = []; 

  findOccurrenceWanted(): void {
    const inputStringIntoArray = Array.from(this.inputString);

    inputStringIntoArray.forEach((digit) => {
      if (!this.alreadyCheckedDigits.includes(digit)) {
        const occurrenceCounter = this.inputString.split(digit).length - 1; 

        this.alreadyCheckedDigits.push(digit); 

        if (occurrenceCounter >= this.occurrenceToCheck) {
          this.resultsArray.push(digit);
        }
      }
    });
  }
}

Essentially, you specify the number of occurrences to check using the occurrenceToCheck variable, then when you click the button, the script checks each digit's occurrence in the string provided by the user and stores the result in the resultsArray. It also ensures that each digit is only checked once using the alreadyCheckedDigits array.

This script can now work with letters and all kinds of digits, not just numbers.

I hope this explanation helps!

I am attempting to gather user input for an array while also ensuring that duplicate values are being checked

Answer №1

Answer №2

Answer №3

Similar questions

The import component functions correctly when it is located in the app folder, but does not work when it is installed as

Can you identify the TypeScript type for an array containing various Angular components?

PHP - retrieve a one-dimensional array from a key-value paired array

Issue with debounce function failure in handling onChange event for a controlled input field

Find out whether the page was reloaded or accessed directly through a hyperlink

An issue occurred: Unable to access the 'login' property because of a TypeError

Utilizing the reduce() function to simultaneously assign values to two variables from data input

The 'items' property cannot be linked to 'virtual-scroller' as it is not a recognized attribute

What is the importance of having typings when using TypeScript?

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

How to effectively implement React Context with the useState hook in a TypeScript project

Issue with Angular 8: discrepancy between the value utilized in component.html and the value stored in component.ts (Azure application service)

Creating a library in Angular2 with multiple routes: a step-by-step guide!

"Would someone be able to advise me on how to correctly reference the PrimeNG AutoCompleteModule within my

Guide on how to design a schema in Mongoose for uploading arrays of objects in MongoDB

Exploring the use of isdigit() with a character array

Combine TypeScript files in a specific sequence following compilation

Employing square bracket notation based on the input data

Obtaining attribute data value upon selection change in Angular 4

Using PHP to convert an array of objects into JSON