Most efficient method for comparing two JSON arrays and rearranging their positions

Question

Most efficient method for comparing two JSON arrays and rearranging their positions

I am faced with a challenge involving two Javascript JSON arrays. The arrays in question are named this.BicyclePartsOLD and this.BicyclePartsNEW.

Both arrays contain an attribute named "ListOrder". The OLD array is currently ordered from ListOrder 1 to n items.

The NEW array has been modified but still contains the same records as the BicyclePartsOLD. Now, I need to update the OLD array based on changes made in the NEW array. For example, if someone changed the ListOrder from 1 to 3 in the NEW array, I need to update the OLD array accordingly by setting ListOrder 1 to 3, ListOrder 2 to 1, and ListOrder 3 to 2.

I have attempted the following approach, but I am unsure about the best way to rearrange the ListOrder values:

for(var i = 0; i < this.BicyclePartsOLD.length; i++)
{
     for(var j = 0; j < this.BicyclePartsNEW.length; j++)
     {
          if(this.BicyclePartsOLD[i].PartNumber === this.BicyclePartsNEW[j].PartNumber)
          {
              this.BicyclePartsOLD[i].ListOrder = this.BicyclePartsNEW[j].ListOrder;
              //NOT Sure how to reorder BicyclePartsOLD here, there will be another
              //item with the same ListOrder at this point.
          }
     }
}

If anyone could provide guidance or advice to help me navigate towards the right solution, it would be greatly appreciated.

javascript json

Answer 1

Answer №1

Instead of having two separate arrays with identical data but unrelated objects, why not consider creating two arrays that both contain the same objects? This way, making changes to an object will automatically be reflected in both places.

One approach is to have two arrays pointing to the same objects:

Array1 -> [{foo:'bar'},{baz:'bam'}]
Array2 -> [{baz:'bam'},{foo:'bar'}]

The object containing 'foo' in the first array can be the exact same object as the one with 'foo' in the second array (not just similar properties). Editing one will result in changes being mirrored in both arrays.

For this purpose, you could use a slice() on the NEW array to create a copy of the array at one level deep. Essentially, it's the duplicate items in a different container array. You can then sort the newly sliced array as desired.

~~this.BicyclePartsOLD = this.BicyclePartsNEW.slice().sort(function(){...});~~

To avoid repetitive slicing, it's recommended to create both OLD and NEW arrays initially. When adding an entry, generate an object with your data and push that object into both arrays, ensuring they hold the same object for synchronized editing.

Consider something like this:

var OLD = [];
var NEW = [];

// Adding an entry
var newItem = {}
OLD.push(newItem);
NEW.push(newItem);

//Editing that item should apply to both arrays since they share the same object
OLD[0].someProperty = 'someValue';

console.log(OLD[0].someProperty); // someValue
console.log(NEW[0].someProperty); // someValue


// An item exclusive to OLD
var oldItem = {};
OLD.push(oldItem);

// Another item only in OLD
var yetAnotherOldItem = {};
OLD.push(yetAnotherOldItem);

// Moving one of those old items to NEW and making edits to it
NEW.push(OLD[2]);
OLD[2].revived = 'I feel new!';

// The changes should reflect in both arrays, although at different indices (due to the additional OLD item)
console.log(OLD[2].revived); // someValue
console.log(NEW[1].revived); // someValue

Answer 2

Instead of having two separate arrays with identical data but unrelated objects, why not consider creating two arrays that both contain the same objects? This way, making changes to an object will automatically be reflected in both places.

One approach is to have two arrays pointing to the same objects:

Array1 -> [{foo:'bar'},{baz:'bam'}]
Array2 -> [{baz:'bam'},{foo:'bar'}]

The object containing 'foo' in the first array can be the exact same object as the one with 'foo' in the second array (not just similar properties). Editing one will result in changes being mirrored in both arrays.

For this purpose, you could use a slice() on the NEW array to create a copy of the array at one level deep. Essentially, it's the duplicate items in a different container array. You can then sort the newly sliced array as desired.

~~this.BicyclePartsOLD = this.BicyclePartsNEW.slice().sort(function(){...});~~

To avoid repetitive slicing, it's recommended to create both OLD and NEW arrays initially. When adding an entry, generate an object with your data and push that object into both arrays, ensuring they hold the same object for synchronized editing.

Consider something like this:

var OLD = [];
var NEW = [];

// Adding an entry
var newItem = {}
OLD.push(newItem);
NEW.push(newItem);

//Editing that item should apply to both arrays since they share the same object
OLD[0].someProperty = 'someValue';

console.log(OLD[0].someProperty); // someValue
console.log(NEW[0].someProperty); // someValue


// An item exclusive to OLD
var oldItem = {};
OLD.push(oldItem);

// Another item only in OLD
var yetAnotherOldItem = {};
OLD.push(yetAnotherOldItem);

// Moving one of those old items to NEW and making edits to it
NEW.push(OLD[2]);
OLD[2].revived = 'I feel new!';

// The changes should reflect in both arrays, although at different indices (due to the additional OLD item)
console.log(OLD[2].revived); // someValue
console.log(NEW[1].revived); // someValue

Most efficient method for comparing two JSON arrays and rearranging their positions

Answer №1

Similar questions

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

A guide on combining two counters in Vue to create a unified value

Deserializing JSON properties in a dynamic way

Need help accessing data from an API using Axios.post and passing an ID?

The error message "node Unable to iterate over property 'forEach' because it is undefined" appeared

An action in redux-toolkit has detected the presence of a non-serializable value

Understanding how to retrieve the FileType from a Document Object Model using JavaScript

Troubleshooting issue: Django and Javascript - Why is my dependent dropdown feature not

creating a while loop in node.js

Modifying Div Size with Jquery

Issue encountered in AngularJS while configuring resources for the action `query`: Anticipated response was an object, but received an array instead

Unable to retrieve Angular Service variable from Controller

How do the authentication and authorization processes in my frontend connect with the backend of my API system?

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

I'm sorry, but we were unable to locate the /bin/sh

An issue has occurred while trying to execute the npm start command within PhpStorm

Is there a way to customize the JSON-wrapped key for a class without being able to annotate the class with @JsonTypeInfo?

Adjust Fabric js Canvas Size to Fill Entire Screen

What is the best way to allow all authenticated routes to display the Devise ajax Login form?