Merging two arrays into one while maintaining position through creating object props - Javascript

Question

I've been banging my head against the wall all morning trying to figure this out. I'm working with the Google Distance Matrix API from which I'm getting an array of trip durations (in seconds) of which I need to apply the exact same ordering to another hard-coded array I've made of Beach Names. Then, after I get an array Beach Name - Durations elements, I need to sort through them in basic ascending order. But the sort will have to be done on what I think will have to be a nested object. Here's what I'm working with:

// Array of beach names
beachNamesArr = ["Kill Devil Hills Beach", "Wrightsville Beach", "Oak Island Beach", "Myrtle Beach", "Isle Of Palms Beach", "Hilton Head Island Beach", "Tybee Island Beach", "Saint Simons Island Beach", "Fernandina Beach", "Neptune Beach", "Saint Augustine Beach", "Daytona Beach", "Cape Canaveral Beach", "Palm Beach", "Fort Lauderdale Beach", "Miami Beach", "Naples Beach", "Clearwater Beach", "Alligator Point Beach", "Panama City Beach", "Pensacola Beach", "Gulf Shores Beach", "Dauphin Island Beach", "Biloxi Beach", "Bay Saint Louis Beach"]

// Array of trip durations from users current location in seconds
durationArr = [32943, 22969, 22879, 20306, 19709, 15659, 14489, 16924, 19328, 19551, 20918, 23180, 25435, 31079, 33490, 34425, 31316, 25289, 19107, 17924, 18420, 19589, 19231, 20520, 22181]

I need the elements positions in both arrays to stay the same because Kill Devil Hills is 32943 secs and Myrtle Beach is 20306 secs and so on .. Then i simply need to sort them ascending based on their duration.

I'm assuming that the new array will have to look something like:

combinedArr = ['Kill Devil Hills': {duration: 32943}, ... ]

but that honestly doesn't even look like an array so I don't know

Would much appreciate some help

What I did in [this example](http://www.geocodezip.com/v3_SO_closestPlaces10sort.html) (which does two distance sorts, one by straight line distance to determine which locations to send to the DistanceMatrix, then sorts the results from the DistanceMatrix by distance), was to add the information I wanted to sort by distance to the object returned from the distance matrix, then sort those by distance. — geocodezip, Jul 04 '20 at 19:01

Pavel Barmin · Answer 1 · 2020-07-04T19:18:37.183

Simpler way - create array of objects with two fields: ‘name’ and ‘duration’

[{ name: “some name”, duration: 1234 }, ... ]

// Array of beach names
beachNamesArr = ["Kill Devil Hills Beach", "Wrightsville Beach", "Oak Island Beach", "Myrtle Beach", "Isle Of Palms Beach", "Hilton Head Island Beach", "Tybee Island Beach", "Saint Simons Island Beach", "Fernandina Beach", "Neptune Beach", "Saint Augustine Beach", "Daytona Beach", "Cape Canaveral Beach", "Palm Beach", "Fort Lauderdale Beach", "Miami Beach", "Naples Beach", "Clearwater Beach", "Alligator Point Beach", "Panama City Beach", "Pensacola Beach", "Gulf Shores Beach", "Dauphin Island Beach", "Biloxi Beach", "Bay Saint Louis Beach"]

// Array of trip durations from users current location in seconds
durationArr = [32943, 22969, 22879, 20306, 19709, 15659, 14489, 16924, 19328, 19551, 20918, 23180, 25435, 31079, 33490, 34425, 31316, 25289, 19107, 17924, 18420, 19589, 19231, 20520, 22181]

var beaches = beachNamesArr
  .map((name, index) => ({ name: name, duration: durationArr[index] }))
  .sort((a, b) => a.duration - b.duration)
console.log(beaches);

mplungjan · Answer 2 · 2020-07-04T19:37:05.743

Here are a few versions

using an a array
using objects instead of object arrays

I assumed sorting on title and not on distance

// Array of beach names
const beachNamesArr = ["Kill Devil Hills Beach", "Wrightsville Beach", "Oak Island Beach", "Myrtle Beach", "Isle Of Palms Beach", "Hilton Head Island Beach", "Tybee Island Beach", "Saint Simons Island Beach", "Fernandina Beach", "Neptune Beach", "Saint Augustine Beach", "Daytona Beach", "Cape Canaveral Beach", "Palm Beach", "Fort Lauderdale Beach", "Miami Beach", "Naples Beach", "Clearwater Beach", "Alligator Point Beach", "Panama City Beach", "Pensacola Beach", "Gulf Shores Beach", "Dauphin Island Beach", "Biloxi Beach", "Bay Saint Louis Beach"]

// Array of trip durations from users current location in seconds
const durationArr = [32943, 22969, 22879, 20306, 19709, 15659, 14489, 16924, 19328, 19551, 20918, 23180, 25435, 31079, 33490, 34425, 31316, 25289, 19107, 17924, 18420, 19589, 19231, 20520, 22181]

const objArray = beachNamesArr.map((beach,i) => ({[beach]:durationArr[i]}))

objArray.sort((a,b) => Object.values(a)[0]-Object.values(b)[0])

const beachObj = beachNamesArr.reduce((acc, cur, i) => {
  acc[cur] = durationArr[i];
  return acc
}, {});

// soring the object alphabetically

//https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key
Object.keys(beachObj).sort().forEach(function(key) {
  var value = beachObj[key];
  delete beachObj[key];
  beachObj[key] = value;
});


console.log(objArray)
console.log(beachObj)

I need it to actually be sorted on the duration integers .. but I can probably just work around — , Jul 04 '20 at 19:23
can you actually go back to your original map method .. that's pretty much what i need .. but i guess to sort the array by the duration value .. i need keys placed into the object-elements returned.. i.e. what i got from your original const mergedArray = nameArray.map((beach, i) => ({[beach]:distArr[i]})) yields an array like this: [{'Kill Devil Hills': 13090}, {'Some Beach Name': 14090}... But what I NEED is something like: [{name: 'Kill Devil Hills', duration: 13090}, {name: 'Some Beach Name', duration: 14090}] — , Jul 04 '20 at 19:34
Sorting: `objArray.sort((a,b) => Object.values(a)[0]-Object.values(b)[0])` — mplungjan, Jul 04 '20 at 19:40
This did the trick!! objArray.sort((a,b) => Object.values(a)[0]-Object.values(b)[0]) I wish I had a good clue as to why ... But thank you .. hopefully it will come with time — , Jul 04 '20 at 19:51

Merging two arrays into one while maintaining position through creating object props - Javascript

2 Answers2