Is There A Way In Javascript/typescript Of Adding Two Arrays In An Object And Sort Them?

I have to arrays: countries = ['USA', 'Spain', 'Italy', 'France', 'Germany', 'UK', 'Iran', 'Turkey', 'Belgium', 'Netherlands', 'Canada', 'Switzerland', 'Brazil', 'Russia', 'Portug

Solution 1:

Create an array for the merged objects, then sort the array of objects by mortality rate:

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"]
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"]
    
const merged = []
for (let i = 0; i < countries.length; i++) {
  merged.push({
    country: countries[i],
    rate: mortalityRates[i],
  })
}
merged.sort((a, b) => b.rate - a.rate)

console.log(merged)

And a one-liner:

const merged = countries
  .map((country, i) => ({ country, rate: mortalityRates[i]}))
  .sort((a, b) => b.rate - a.rate)

Solution 2:

You can map the values of both arrays into an array of objects and sort them as follows:

const sortedData = mortalityRates.map((v, i) => ({ rate: v, country: countries[i] })).sort((o1, o2) => o1.rate - o2.rate);

From there, it'll be easy to create a bar chart for example.

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"];
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"];

const sortedData = mortalityRates.map((v, i) => ({
  rate: v,
  country: countries[i]
})).sort((o1, o2) => o1.rate - o2.rate);

newChart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: sortedData.map(o => o.country),
    datasets: [{
      data: sortedData.map(o => o.rate),
      backgroundColor: 'red'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Mortality Rates'
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    }
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvasid="myChart"height="100"></canvas>