Sort a numeric array inside of an object of arrays while keeping the order of the other arrays in the same order as the sorted numeric array

Question

I know, it sounds like a loaded question, but let me clarify. I created an app that pulls location warehouses, facilities, and passes them into a loop. The loop runs and compares each facility (address) to an address or zip entered by the user through the Google Maps DistanceMatrix API. This is where the facilities, distances and times arrays are derived. In this little example, I removed all of the dynamic parts in order to get a working output of code to test and hard-coded all of the results. Also, so that I don't keep making calls to the Google Maps API. Anyway, all of the facilities, distances, and times are in order and belong to one another. What I mean is, facilities[0] belongs to the distances[0] and times[0] values. The same goes for the proceeding items in each array. Each item[i] in an array respectively belongs to the same numbered item[i] in another array.

I'm trying to sort the distances array, but now I am, in a sense, jumbling the data so I'm not sure how to keep distances[0] say if it moves to distances[3] in order with the other arrays values because facilites[0] and times[0] are not being sorted.

Now, before I sort the data, I'm passing each array into a resultsObject with the Object.assign method. You'll see that if you test it, you'll have an object with the three arrays of data that are all in the same order (based on what I explained above). Is there a way to sort distances inside of the resultsObject, while at the same time sorting the other two facilites and times in the same order? Sorry if I'm over describing or repeating myself but I'm trying to be as descriptive as possible.

let inputVal = [];
let facilityArray = [];
let distanceArray = [];
let timeArray = [];
let filteredArray = [];
let sortedArray = [];
let resultsObject, intDistanceResult;



callFetch = () => {
    const facilities = ["MD01", "PA01", "OH01", "NC01", "GA01", "SC01", "SC02", "TN01", "AL01", "FL02", "TX01", "IN01", "SC03", "FL01"];
    const distances = [133, 32, 538, 422, 795, 666, 664, 822, 1118, 867, 1504, 657, 635, 1210];
    const times = ["2 hours 12 mins", "47 mins", "8 hours 20 mins", "6 hours 32 mins", "12 hours 0 mins", "10 hours 2 mins",
        "9 hours 56 mins", "12 hours 21 mins", "16 hours 33 mins", "12 hours 43 mins", "22 hours 16 mins", "10 hours 16 mins",
        "9 hours 39 mins", "17 hours 35 mins"
    ];

    facilityArray.push(facilities);
    distanceArray.push(distances);
    timeArray.push(times);

    // console.log(distanceArray);
    // sortedArray = distanceArray.sort((a, b) => a - b);
    // console.log(sortedArray);

    resultsObject = Object.assign({}, [facilityArray, distanceArray, timeArray]);
    console.log(resultsObject);
}


form.addEventListener("submit", e => {
    e.preventDefault();
    callFetch();
});

<!DOCTYPE html>
<html>

<head>
    <title>Ethos Service Center - Google Maps Distance Search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <div class="container-sm mt-3">
        <form class="form mb-3" id="form">
            <div class="search">
                <div class="card-body">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Patient Destination</span>
                        </div>
                        <input class="form-control" type="text" placeholder="Enter Zip Code" class="patientaddress" id="patientaddress">
                        <div class=" input-group-prepend ">
                            <span class="input-group-text " id="message "></span>
                        </div>
                    </div>
                    <hr>
                    <button class="btn btn-primary mt-2 " type="submit " id="submit ">Submit</button>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

let inputVal = [];
let facilityArray = [];
let distanceArray = [];
let timeArray = [];
let filteredArray = [];
let sortedArray = [];
let resultsObject, intDistanceResult;



callFetch = () => {
    const facilities = ["MD01", "PA01", "OH01", "NC01", "GA01", "SC01", "SC02", "TN01", "AL01", "FL02", "TX01", "IN01", "SC03", "FL01"];
    const distances = [133, 32, 538, 422, 795, 666, 664, 822, 1118, 867, 1504, 657, 635, 1210];
    const times = ["2 hours 12 mins", "47 mins", "8 hours 20 mins", "6 hours 32 mins", "12 hours 0 mins", "10 hours 2 mins",
        "9 hours 56 mins", "12 hours 21 mins", "16 hours 33 mins", "12 hours 43 mins", "22 hours 16 mins", "10 hours 16 mins",
        "9 hours 39 mins", "17 hours 35 mins"
    ];

    facilityArray.push(facilities);
    distanceArray.push(distances);
    timeArray.push(times);

    // console.log(distanceArray);
    // sortedArray = distanceArray.sort((a, b) => a - b);
    // console.log(sortedArray);

    resultsObject = Object.assign({}, [facilityArray, distanceArray, timeArray]);
    console.log(resultsObject);
}


form.addEventListener("submit", e => {
    e.preventDefault();
    callFetch();
});

<!DOCTYPE html>
<html>

<head>
    <title>Service Center - Google Maps Distance Search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <div class="container-sm mt-3">
        <form class="form mb-3" id="form">
            <div class="search">
                <div class="card-body">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Patient Destination</span>
                        </div>
                        <input class="form-control" type="text" placeholder="Enter Zip Code" class="patientaddress" id="patientaddress">
                        <div class=" input-group-prepend ">
                            <span class="input-group-text " id="message "></span>
                        </div>
                    </div>
                    <hr>
                    <button class="btn btn-primary mt-2 " type="submit " id="submit ">Submit</button>
                    <button class="btn btn-outline-success mt-2 ml-3 " type="reset " value="Reset " id="refresh">Clear Destination</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript " src="main.js "></script>
</body>

</html>

The best solution is to not have multiple arrays in the first place. Use a single array of objects, and sort the objects by the distance property. — Barmar
– Barmar, Commented Aug 24, 2020 at 20:24

charlietfl · Accepted Answer · 2020-08-24 20:33:32Z

1

Merge the arrays into a single array of objects and then sort by distance

const facilities = ["MD01", "PA01", "OH01", "NC01", "GA01", "SC01", "SC02", "TN01", "AL01", "FL02", "TX01", "IN01", "SC03", "FL01"];
    const distances = [133, 32, 538, 422, 795, 666, 664, 822, 1118, 867, 1504, 657, 635, 1210];
    const times = ["2 hours 12 mins", "47 mins", "8 hours 20 mins", "6 hours 32 mins", "12 hours 0 mins", "10 hours 2 mins",
        "9 hours 56 mins", "12 hours 21 mins", "16 hours 33 mins", "12 hours 43 mins", "22 hours 16 mins", "10 hours 16 mins",
        "9 hours 39 mins", "17 hours 35 mins"
    ];
    
const combined = facilities.map((facility,i) =>({facility, distance: distances[i], time: times[i]}))
                .sort((a,b) => a.distance-b.distance)
 
console.log(combined)

answered Aug 24, 2020 at 20:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

trincot · Accepted Answer · 2020-08-24 20:33:45Z

1

The Object.assign solution is not really helping you any step closer. You would need to create little objects for each triple of facility, distance and time:

let triples = facilities.map((facility, i) => ({
    facility,
    distance: distances[i],
    time: times[i]
}));

This array you can sort by distance:

triples.sort((a, b) => a.distance - b.distance);

answered Aug 24, 2020 at 20:33

trincot

357k38 gold badges282 silver badges338 bronze badges

Collectives™ on Stack Overflow

Sort a numeric array inside of an object of arrays while keeping the order of the other arrays in the same order as the sorted numeric array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related