How to join two arrays according to their values

Question

I have the following arrays:

var main_arr = [[54.5,225.5], [45.25,15.54], [1.5, 22.3]];
var sec_arr = [[1.51, 22.35], [54.32,32.54], [4.56,45.45]];

I want to get the last element of the first array and find the closest one by values from the second array.

Then I want the found element to be pushed in the main array and removed from the secondary. I want it to repeat until there are no elements in the secondary array.

The result should look like this:

[[54.5,225.5], [45.25,15.54], [1.5, 22.3], [1.51, 22.35], [4.56,45.45], [54.32,32.54]]

How can I do it using pure JavasScript without any frameworks?

Edit:

I'm not sure if I explained it well enough so I'm gonna give you a simpler version. You have one main and one secondary array of numbers. You can't reorder anything in the main one.

var main = [1, 5, 4, 3, 7];
var secondary = [9, 3, 4, 0, 5];

I want to get the number that is the closest to the last element of the main array and push it to it. Then it should be repeated until there are no elements in the secondary array. The result should look like this:

var main = [1, 5, 4, 3, 7, 9, 5, 4, 3, 0];
var secondary = [];

Answer 1

Example

I'll give a code sample first and elaborate a bit on it later on:

let main = [1, 5, 4, 3, 7];
let secondary = [9, 3, 4 0, 5];

for (var i = secondary.length; i > 0; i--) {
    const lastElement = main[main.length-1];
    const distance = secondary.map(item => calculateDistance(item, lastElement));
    const index = indexOfMinValue(distance);
    main.push(secondary[index]);
    secondary.splice(index, 1);
}

function calculateDistance(item, lastElement) {
    // calculate the distance (e.g. (x1-x2)^2 + (y1-y2)^2)
}

function indexOfMinValue(distance) {
    return distance.reduce((iMin, x, i, arr) => x < arr[iMin] ? i : iMin, Number.POSITIVE_INFINITY);
}

What it does

Since you move exactly one item from the secondary array in each iteration you have to iterate over the length of the secondary array (you can not use for (var i = 0; i < secondary.length; i++) since the length will change in each iteration.

You then have to calculate the distances of all elements in regard to the last element of the main array. For mere numbers you would do just a simple comparison abs(lastElement - currentElement) for points you would have to use the formula as suggested in the comment.

With that you get an array that holds the current distances from which you have to find the minimum value. In the given example in the first iteration the distance array would look like this:

distance = [2, 4, 3, 7, 2];

The indexOfMinValue -function (taken from this answer ) yields the index of the element with the minimum distance (the first one in this example). With that index you can push the corresponding value from the secondary to the main array and remove it from the secondary array.

Considerations

• The complexity of the algorithm is O(n^2) where n is the number of elements in the secondary array. So this might get out of hand for huge arrays.
• In its current form the indexOfMinValue yields the first element with minimum distance if several items have the same distance. It might be desired to yield the last result or select one of the minima randomly or...