Angular 2 repeatedly pushes elements into an array during ngDoCheck

I need assistance with updating my 'filelistArray' array. It is currently being populated with duplicate items whenever content is available in the 'this.uploadCopy.queue' array, which happens multiple times.

However, I want to update the array only when there is unique content available in 'this.uploaCopy.queue', and avoid any duplicates.

Can someone kindly provide guidance on how to achieve this?

ngDoCheck() {
  if (this.uploadCopy.queue !== undefined && this.uploadCopy.queue.length > 0) {


    for (let entryitemlist of this.uploadCopy.queue) {

      this.filelistArray.push(entryitemlist.file.name);

    }

  }

  if (this.uploadCopy.queue == undefined && this.uploadCopy.queue.length == 0) {
   this.filelistArray.length = 0;
  }

}

Answer №1

To avoid duplicate entries in an array, utilize the ngOnChanges method to monitor and handle changes. Consult the Angular documentation for further guidance on ngOnChanges implementation.

Eliminate duplicates in an array by converting it into a new array with unique values using the following code: this.newArr = Array.from(new Set(this.oldArr.map((item) => item)))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for creating a TypeScript project for exporting purposes

Forgive me for my lack of experience in the js ecosystem. Transitioning from static languages to typescript has been a positive change, though I still find myself struggling to grasp the packaging/module system, especially when coupled with typescript defi ...

Using JavaScript to show content in a textarea field

In my index.jsp file, I have implemented the following code to populate two textareas, INPUT_TEXT and INPUT_TEXT2, with processed data. This involves passing the text through a servlet, a Java class, and finally displaying the preprocessed results in the s ...

In C#, transforming JSON serialization to replace single backslashes with double backslashes

When generating JSON to be included directly in an HTML file, it's important to wrap the JSON in a JavaScript string. For example: var dataContacts = '{"Contacts":[{"Id":0,"Active":false,"Company":"Rory The Architect\\, Melt"} ...

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

Retrieving input field values in JS/Ajax without needing to refresh the page or click a button

Currently, I have set up a JavaScript function that submits data without refreshing the page or requiring a button click. The input field is located within tab #2 and triggers the JS function when the user stops typing. However, the issue arises when the ...

When transitioning from Angular5 to Angular6, it seems that the angular.json file has not been properly updated

I am looking to transition from Angular5 to Angular6, following the guidance provided in this answer My attempt to update .angular-cli.json to angular.json using three commands did not yield the expected results: npm install -g @angular/cli npm install @ ...

Unexpected directory structure for internal npm module

Here is the package.json I use for building and pushing to an internal package registry: { "name": "@internal/my-project", "version": "0.0.0", "description": "Test package", "type&quo ...

Creating an asynchronous function in a Vue.js component that utilizes the Lodash library

I'm struggling with writing an async function correctly. Can someone provide guidance on how to achieve this? async search (loading, search, vm) { let vm = this _.debounce(() => { let ApiURL = '/users/' } let { res } = await ...

Experimenting with altering the heights of two Views using GestureHandler in React Native

I am currently working on a project where I need to implement height adjustable Views using React Native. One particular aspect has been causing me some trouble. I'm trying to create two stacked Views with a draggable line in between them so that the ...

Customizing textfield error color in MUI5 React based on conditions

I am looking for a way to dynamically change the color of error messages in my application, with warnings displaying in orange and errors in red. I prefer not to use useStyle as it is now deprecated in mui5. Below is the code snippet I have created: import ...

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

Issue with npm during installation of REACT - not functioning as expected

After executing all the necessary commands on the command line, including globally installing npm with npm install -g create-react-app, as well as running npx create-react-app <myprojectname> and clearing the npm cache, I consistently encountered an ...

Having difficulty building a react.js application using Visual Studio 2019

Currently, I am following a helpful tutorial on creating a react.js application using visual studio. At this stage, the tutorial instructs me to open the command prompt and enter the following command: webpack app.tsx --config webpack-config.js (I have ...

Error: The provided `anchorEl` property for this component is invalid

While working on my React 18.2 app with MUI 5.10.5, I encountered an issue trying to create a <Menu /> element that should open when a button is clicked. The menu does appear, but the positioning seems off as it displays in the top-left corner of the ...

Top Method for Incorporating Syntax Highlighting into Code Blocks - React Sanity Blog

I'm currently exploring the most effective method to incorporate syntax highlighting into my react sanity.io blog. Here's a look at the article component I've developed using react: import React, {useEffect, useState} from "react"; import ...

When using Next.js getServerSideProps(), cookies are not accessible on the initial render after a redirect, but they become available upon refreshing the page

Within my Next.js application, I am serving cookies from the server-side API like this: res.setHeader('Set-Cookie', AJWT) res.redirect(302, '/') Now, in my index.js file, I am attempting to retrieve the cookie before the page is render ...

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

Visual Studio Code encounters a JavaScript NPM error that is causing unexpected issues

When using Visual Studio Code, I want my JavaScript program to automatically run through a server as I am learning online. I followed the steps from a tutorial on setting up my IDE and installed Git and Node. Now, when I open Visual Studio and save my Hel ...

Safari is capable of rendering Jquery, whereas Chrome seems to have trouble

The code I am using renders perfectly in Safari but not in Chrome. Despite checking the console in Chrome, no errors are showing up. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="ht ...

Store and Persist Data for a Model in MongoDB

Currently working through the MongoDB and Mongoose section on FreeCodeCamp. The challenge involves creating a document instance using the Person constructor previously built. The object passed to the constructor should have fields for name, age, and favor ...