Monitoring the Progression of Array Sequence

I am facing an issue with tracking changes in an array before and after it is reordered. I have two variables, originalOrder and rulesetOrder. My component is connected to rulesetOrder, so when I move an item, the array updates according to its new index. Every time a reorder happens, I compare originalOrder with rulesetOrder. After all comparisons are done, I update originalOrder with the latest rulesetOrder.

The problem arises when I reorder for the second time. It seems like originalOrder automatically syncs with rulesetOrder, making it hard to spot any differences between the arrays.

Below is my code snippet. Can anyone assist me in ensuring that originalOrder always reflects the previous state of the array whenever the event is triggered again?

OnReorder()
{     
    console.log("Start: " + JSON.stringify(this.originalOrder));
    console.log("New Order:" + JSON.stringify(this.rulesetOrder));        
    this.originalOrder = this.rulesetOrder; 
}

Does setting originalOrder equal to rulesetOrder create a binding between them? How can I prevent them from syncing up automatically?

First time:

Start: ["ae74e7fd-a772-4fa2-b2cb-19c7c0bc611f", "1caf3416-9853-49eb-8bda-c3b9017a204a", "9e5fe94d-6c0e-4b85-85f4-38a074badfeb"]

New Order:["1caf3416-9853-49eb-8bda-c3b9017a204a", "ae74e7fd-a772-4fa2-b2cb-19c7c0bc611f","9e5fe94d-6c0e-4b85-85f4-38a074badfeb"]

2nd time:

Start: ["ae74e7fd-a772-4fa2-b2cb-19c7c0bc611f","1caf3416-9853-49eb-8bda-c3b9017a204a","9e5fe94d-6c0e-4b85-85f4-38a074badfeb"]

New Order:["ae74e7fd-a772-4fa2-b2cb-19c7c0bc611f","1caf3416-9853-49eb-8bda-c3b9017a204a","9e5fe94d-6c0e-4b85-85f4-38a074badfeb"]

angulartypescript

Answer №1

When dealing with arrays, it's important to remember that they are passed by reference. As previously mentioned by Mike, in order for this to function correctly, a duplicate of the array must be assigned to the originalOrder array.

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

Is it possible to overlook specific attributes when constructing an object using TypeScript interfaces?

I have defined an interface with various properties. I am looking to instantiate an object based on this interface, but I only want to partially initialize some of the properties. Is there a way to accomplish this? Thank you. export interface Campaign { ...

typescript

Triggering a subscription by hovering over a specific element on the webpage

I am looking to implement a subscription and perform certain actions when hovering over specific elements within the DOM. For instance, take the example of home.component.html: <div class="container"> <div class=&q ...

javascriptangularrxjs5rxjs6rxjs-observables

Error encountered in Intellij for Typescript interface: SyntaxError - Unexpected identifier

I am currently testing a basic interface with the following code: interface TestInterface { id: number; text: string; } const testInterfaceImplementation: TestInterface = { id: 1, text: 'sample text' }; console.log(testInterface ...

javascripttypescriptintellij-ideasyntaxinterface

Struggling to use the bind method for the loadScene callback function in cocosCreator or cocos2d-x?

When the loadScene() callback function is bound, the information retrieved from getScene() becomes inaccurate. Upon transitioning from the Entry Scene to the Lobby Scene, I perform post-processing tasks. The implementation was done in TypeScript. Entry. ...

typescriptcocos2d-jscocoscreator

Setting or passing a variable via URL in Angular 2 applications

I am working on an Angular2 application that includes a chart component. Users can adjust the chart by setting certain variables. I want to give users the option to have the chart preset with specific variables by using a URL link. For instance: localhost ...

javascriptangularvariablesurltypescript

Can a variable in Typescript be defined to accept any value as long as it follows a specific format?

For instance, I am searching for a way to represent any value that consists of two strings separated by an underscore "_". I attempted something along the lines of: let key:string = string1 + "_" + string2; Upon entering this code, I quickly realized ...

javascriptstringtypescripttypes

Best practice in TypeScript for handling an Enum with a switch-case to assign a variable

Here's an issue I'm facing: I have a variable called Difficulty that is an Enum. Within a function, I need to set the configuration DifficultyConfig based on the value of Difficulty. The current solution I have in mind seems overly complicated: ...

javascripttypescript

Managing optional props in Typescript React depending on the type of another prop

I am in the process of developing a fetcher component API. The concept is quite straightforward - you provide it with a fetcher (a function that returns a promise) and a params array (representing positional arguments) as props, and it will deliver the res ...

reactjstypescript

Creating a stacked chart in Angular using chart.js with JSON array of objects values

I am currently working on implementing a stacked chart using chart.js, and I have encountered some challenges: I am struggling to display currency values in the correct format on the chart (the height of the bar is not visible when passing amounts). How c ...

javascriptangularchartsbar-chart

While utilizing the imodel.js front-end for designing a custom geometric model, I ran into an issue while trying to display it

Utilizing imodel.js front-end, I was able to design a customized geometric model featuring elements like a collection box. However, when placing the model within the existing SpatialViewState in bim, it failed to display properly in the current view. Sub ...

javascripttypescriptimodeljs

Mastering Dropdown Navigation and Value Setting in Angular

I am facing a challenge with two components named ComponentA and ComponentB. In ComponentB, there is a link that, when clicked, should navigate to ComponentA and send specific data to it. This data needs to be displayed in the dropdown options of Component ...

javascriptangulartypescript

npm encountered an error while trying to fetch the requested package when running ng new app

I'm working on developing a new application using the ng new app command. Everything goes smoothly until reaching the final CREATE message below. At that point, it gets stuck for hours (literally) at the "Installing packages (npm)..." stage. Eventu ...

node.jsangularnpm

(Enhancing Angular) Capture HttpResponse errors and seamlessly proceed with the Observable

There's a dropdown text box with type-ahead search functionality. Valid item names prompt the expected list of items in the drop-down menu, while invalid entries trigger a 400 error response from the API. This error is caught by the HttpErrorIntercept ...

javascriptangularrxjs

Angular: Simplifying complex JSON structures

Is there a built-in feature in Angular for flattening JSON data and then restructuring it back? I came across some code below, but I'm wondering if Angular offers any native library functions for this task. If not, I may consider incorporating this fu ...

javascriptangular

Tips for preventing overlap in 2 dropdown menus:

I am facing an issue with the code snippet below, which contains 2 checkboxes stacked on top of each other. When one checkbox is clicked, a dropdown menu appears. The problem arises when the options in the above dropdown overlap with those in the dropdown ...

cssangulardrop-down-menukendo-uidropdown

Unlocking the potential of the ‘Rx Observable’ in Angular 2 to effectively tackle double click issues

let button = document.querySelector('.mbtn'); let lab = document.querySelector('.mlab'); let clickStream = Observable.fromEvent(button,'click'); let doubleClickStream = clickStream .buffer(()=> clickStream.thrott ...

javascriptangulartypescriptbufferrxjs

Acquire all query parameters in Angular 2

Is it possible to retrieve all querystrings from the address bar in an automated way without prior knowledge of their names? For example, I am looking to extract the following: reports?api=Report1&from=&to=&agentId=2&status=1&fixtureI ...

angulartypescript

Ways to stop users from submitting a form repeatedly in Angular

In my current feature, users have the ability to create new data and save it. If the data already exists, a modal will pop up as shown in the image below: However, there is an issue when the user clicks the save button multiple times while the request is ...

angulartypescript

A missing Array.at() method has been reported in TypeScript array type

When I try: const myArray = [0,4,2]; myArray.at(-1); I encounter the following error related to .at The error message reads: Property 'at' does not exist on type 'number[]'.ts (2339) Why is Array.at() not working in this case? Is th ...

arraystypescripttypescript-typings

Angular has deprecated the use of `isObject` and `isNullOrUndefined` in TypeScript

Upon upgrading from Angular 7 to Angular 10 and implementing TypeScript 4 or higher, I began receiving deprecation warnings for the functions isObject() and isNullOrUndefined() when running ng lint warnings The function isNullOrUndefined has been depreca ...

angulartypescript