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

"Learn how to pass around shared state among reducers in React using hooks, all without the need for Redux

Identifying the precise image dimensions required by the browser

Issue with transferring variables between functions in JSON and Jquery

Is it possible to save jQuery plugin initialization settings for future use?

Using Selenium: Checking for existing dropdown values and incrementing if necessary

jQuery code runs smoothly on Firefox but encounters issues on Chrome

Changing a zero-prefixed string into JSON format using Swift 4

Using React Router useHistory to navigate to different routes programmatically

Refreshing a jsp page without the need to reload the content

Adding event listeners to modal buttons in a Handlebars template is a simple process that involves utilizing the `

Tips for resolving the error "React import attempt":

What is the process for moving entered data from one text box to another text box when a checkbox is selected?

Utilize Gson to generate and analyze JSON data containing nested objects including a local date

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

When JavaScript evaluates special characters in HTML, it interrupts the function call within an AJAX response

Using the concept of method chaining in JavaScript, you can easily add multiple methods from

Having trouble retrieving JSON with crossDomain jQuery AJAX

Substitute specific characters in a string using Regex or Gsub

How can I update a CSS class value by utilizing AngularJS variables?

"Issues Arising from Compatibility between Internet Explorer, jQuery,