JSFiddle - React, Tailwind, and code Playground

Code to union 2 array of objects and get sorted updated list replacing values with new one

by Nalin Sajwan

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

JavaScript

let variable1 = [
    { "name": "fund.series", "value": "Series C" },
    { "name": "fund.volatality", "value": "Very High" },
    { "name": "Text2", "value": "Text for no. 2" }
];

let variable2 = [
    { "name": "fund.name", "value": "QFG Precision Growth Portfolio" },
    { "name": "fund.manager", "value": "Quetico Financial Asset Managers" },
    { "name": "fund.series", "value": "Series B" },
    { "name": "fund.volatality", "value": "High" },
    { "name": "contact.phone", "value": "1800 734-3863" },
    { "name": "contact.email", "value": "[email protected]" },
    { "name": "contact.web", "value": "https://qfg.co" },
    { "name": "date.feechange", "value": "June 30, 2019" },
    { "name": "date.snapshot", "value": "March 31, 2019" },
    { "name": "mfee.old", "value": "1.50" },
    { "name": "mfee.new", "value": "1.25" },
    { "name": "perf.years", "value": "8" },
    { "name": "perf.1kvalue", "value": "1,800" },
    { "name": "perf.return", "value": "6.45" },
    { "name": "expense.rate", "value": "1.75" },
    { "name": "expense.1kval", "value": "17.50" },
    { "name": "Text2", "value": "" }
];

console.log("\nvariable1 ==> ", JSON.stringify(variable1, null, 2));
console.log("\nvariable2 ==> ", JSON.stringify(variable2, null, 2));

let combined = _.unionBy(variable1, variable2, "name");

combined.sort((a, b) => {
	let returnVal = 0;
  
	if (a.name.toLowerCase() > b.name.toLowerCase()) {
  	returnVal = 1;
  } else if (a.name.toLowerCase() < b.name.toLowerCase()) {
  	returnVal = -1;
  }
  
  return returnVal;
})

console.log("\ncombined ==> ", JSON.stringify(combined, null, 2));