how to make push elements from two different arrays with same appName inside a new Array in javascript

Question

These are two arrays having some data

var z = [
  {
    appId: "1",
    appName: "CapLogix",
    envId: "970",
    envName: "UAT4"
  },
  {
    appId: "1",
    appName: "CapLogix",
    envId: "970",
    envName: "UAT4"
  },
  {
    appId: "1",
    appName: "CapLogix",
    envId: "970",
    envName: "UAT4"
  },
  {
    appId: "21",
    appName: "NOCC",
    envId: "967",
    envName: "UAT4"
  },
  {
    appId: "21",
    appName: "NOCC",
    envId: "967",
    envName: "UAT4"
  },
  {
    appId: "21",
    appName: "NOCC",
    envId: "967",
    envName: "UAT4"
  },
  {
    appId: "71",
    appName: "NETLOGIX",
    envId: "972",
    envName: "UAT4"
  },
  {
    appId: "71",
    appName: "NETLOGIX",
    envId: "972",
    envName: "UAT4"
  },
  {
    appId: "71",
    appName: "NETLOGIX",
    envId: "972",
    envName: "UAT4"
  },
  {
    appId: "73",
    appName: "ConfigBuilder",
    envId: "971",
    envName: "UAT4"
  },
  {
    appId: "73",
    appName: "ConfigBuilder",
    envId: "971",
    envName: "UAT4"
  }
];

var y = [
  {
    appId: "1",
    appName: "CapLogix",
    envId: "959",
    envName: "SIT-4"
  },
  {
    appId: "1",
    appName: "CapLogix",
    envId: "959",
    envName: "SIT-4"
  },
  {
    appId: "21",
    appName: "NOCC",
    envId: "965",
    envName: "SIT-4"
  },
  {
    appId: "21",
    appName: "NOCC",
    envId: "965",
    envName: "SIT-4"
  },
  {
    appId: "71",
    appName: "NETLOGIX",
    envId: "958",
    envName: "SIT-4"
  },
  {
    appId: "71",
    appName: "NETLOGIX",
    envId: "958",
    envName: "SIT-4"
  },
  {
    appId: "73",
    appName: "ConfigBuilder",
    envId: "963",
    envName: "SIT-4"
  },
  {
    appId: "73",
    appName: "ConfigBuilder",
    envId: "963",
    envName: "SIT-4"
  }
];

This is what I have tried so far.i need a new array with the elements having same appName from above two arrays into a new array.

 var z = [{ appId: "1", appName: "CapLogix", envId: "970", envName: "UAT4" }, { appId: "1", appName: "CapLogix", envId: "970", envName: "UAT4" }, { appId: "1", appName: "CapLogix", envId: "970", envName: "UAT4" }, { appId: "21", appName: "NOCC", envId: "967", envName: "UAT4" }, { appId: "21", appName: "NOCC", envId: "967", envName: "UAT4" }, { appId: "21", appName: "NOCC", envId: "967", envName: "UAT4" }, { appId: "71", appName: "NETLOGIX", envId: "972", envName: "UAT4" }, { appId: "71", appName: "NETLOGIX", envId: "972", envName: "UAT4" }, { appId: "71", appName: "NETLOGIX", envId: "972", envName: "UAT4" }, { appId: "73", appName: "ConfigBuilder", envId: "971", envName: "UAT4" }, { appId: "73", appName: "ConfigBuilder", envId: "971", envName: "UAT4" } ]; var y = [{ appId: "1", appName: "CapLogix", envId: "959", envName: "SIT-4" }, { appId: "1", appName: "CapLogix", envId: "959", envName: "SIT-4" }, { appId: "21", appName: "NOCC", envId: "965", envName: "SIT-4" }, { appId: "21", appName: "NOCC", envId: "965", envName: "SIT-4" }, { appId: "71", appName: "NETLOGIX", envId: "958", envName: "SIT-4" }, { appId: "71", appName: "NETLOGIX", envId: "958", envName: "SIT-4" }, { appId: "73", appName: "ConfigBuilder", envId: "963", envName: "SIT-4" }, { appId: "73", appName: "ConfigBuilder", envId: "963", envName: "SIT-4" } ]; for (var i in z) { if (z[i].appName == "NOCC") { document.getElementById("sa").innerHTML += "{" + "<br>" + "appId :" + z[i].appId + "<br>" + " appName : " + z[i].appName + "<br>" + "envId :" + z[i].envId + "<br>" + " envName : " + z[i].envName + "<br>" + "}" + "<br>" + "," + "</br>"; } } for (var i in y) { if (y[i].appName == "NOCC") { document.getElementById("as").innerHTML += "{" + "<br>" + "appId :" + y[i].appId + "<br>" + " appName : " + y[i].appName + "<br>" + "envId :" + y[i].envId + "<br>" + " envName : " + y[i].envName + "<br>" + "}" + "<br>" + "," + "</br>"; } }

 <div id='sa'></div> <div id='as'></div>

Answer 1

Check the snippet,

This basically get values which are present in both z and y , then creates a new array. This new array is then filtered to get the unique value.

You can add the below block if you need only unique values in the new array.

newArray.filter((a)=> {
        var key = a.appName;
        if (!this[key]) {
            this[key] = true;
            return true;
        }
    }, Object.create(null))

 var z = [ { "appId": "1", "appName": "CapLogix", "envId": "970", "envName": "UAT4", }, { "appId": "1", "appName": "CapLogix", "envId": "970", "envName": "UAT4", }, { "appId": "1", "appName": "CapLogix", "envId": "970", "envName": "UAT4", }, { "appId": "21", "appName": "NOCC", "envId": "967", "envName": "UAT4", }, { "appId": "21", "appName": "NOCC", "envId": "967", "envName": "UAT4", }, { "appId": "21", "appName": "NOCC", "envId": "967", "envName": "UAT4", }, { "appId": "71", "appName": "NETLOGIX", "envId": "972", "envName": "UAT4", }, { "appId": "71", "appName": "NETLOGIX", "envId": "972", "envName": "UAT4", }, { "appId": "71", "appName": "NETLOGIX", "envId": "972", "envName": "UAT4", }, { "appId": "73", "appName": "ConfigBuilder", "envId": "971", "envName": "UAT4", }, { "appId": "73", "appName": "ConfigBuilder", "envId": "971", "envName": "UAT4", } ]; var y = [{ "appId": "1", "appName": "CapLogix", "envId": "959", "envName": "SIT-4", }, { "appId": "1", "appName": "CapLogix", "envId": "959", "envName": "SIT-4", }, { "appId": "21", "appName": "NOCC", "envId": "965", "envName": "SIT-4", }, { "appId": "21", "appName": "NOCC", "envId": "965", "envName": "SIT-4", }, { "appId": "71", "appName": "NETLOGIX", "envId": "958", "envName": "SIT-4", }, { "appId": "71", "appName": "NETLOGIX", "envId": "958", "envName": "SIT-4", }, { "appId": "73", "appName": "ConfigBuilder", "envId": "963", "envName": "SIT-4", }, { "appId": "73", "appName": "ConfigBuilder", "envId": "963", "envName": "SIT-4", }] let newArray = z.filter(o1 => y.some(o2 => o1.appName === o2.appName)); let el = ''; newArray.forEach(item =>{ el +=`<p>id: ${item.appId}, app Name : ${item.appName}</p>`; }); document.getElementById('new').innerHTML = el; //console.log(newArray)

 This is the new array with same values <div id="new"></div>

Answer 2

• Use .concat() to combine both arrays.

   z.concat(y)

• Use .reduce() to group all objects with matching appName values in their own separate arrays. In order to keep each array name, they should all be returned inside a single object literal.

   // result pattern { "CapLogix": [{ "appId": "1", "appName": "CapLogix", "envId": "970", "envName": "UAT4" }, {...}],...}

• Use 3 for...of loops to render with .insertAdjacentHTML() :

  1. a <dt> for each array name ex. <hr><dt>CapLogix</dt><hr>
  2. a <hr> for every object
  3. a <dd> for every key/value pair ex. <dd>"envName": "UAT4"</dd>

• Object.entries() was used to convert object literals into array of arrays

 var z=[{appId:"1",appName:"CapLogix",envId:"970",envName:"UAT4"},{appId:"1",appName:"CapLogix",envId:"970",envName:"UAT4"},{appId:"1",appName:"CapLogix",envId:"970",envName:"UAT4"},{appId:"21",appName:"NOCC",envId:"967",envName:"UAT4"},{appId:"21",appName:"NOCC",envId:"967",envName:"UAT4"},{appId:"21",appName:"NOCC",envId:"967",envName:"UAT4"},{appId:"71",appName:"NETLOGIX",envId:"972",envName:"UAT4"},{appId:"71",appName:"NETLOGIX",envId:"972",envName:"UAT4"},{appId:"71",appName:"NETLOGIX",envId:"972",envName:"UAT4"},{appId:"73",appName:"ConfigBuilder",envId:"971",envName:"UAT4"},{appId:"73",appName:"ConfigBuilder",envId:"971",envName:"UAT4"}],y=[{appId:"1",appName:"CapLogix",envId:"959",envName:"SIT-4"},{appId:"1",appName:"CapLogix",envId:"959",envName:"SIT-4"},{appId:"21",appName:"NOCC",envId:"965",envName:"SIT-4"},{appId:"21",appName:"NOCC",envId:"965",envName:"SIT-4"},{appId:"71",appName:"NETLOGIX",envId:"958",envName:"SIT-4"},{appId:"71",appName:"NETLOGIX",envId:"958",envName:"SIT-4"},{appId:"73",appName:"ConfigBuilder",envId:"963",envName:"SIT-4"},{appId:"73",appName:"ConfigBuilder",envId:"963",envName:"SIT-4"}]; function groupByKV(property, objectArrayA, objectArrayB) { let array = objectArrayA.concat(objectArrayB); return array.reduce((group, current) => { (group[current[property]] = group[current[property]] || []).push(current); return group; }, {}); } function domList(data, selector = 'body') { const main = document.querySelector(selector); const list = document.createElement('dl'); main.appendChild(list); let pairs = Object.entries(data); for (let [arrayKey, array] of pairs) { list.insertAdjacentHTML('beforeend', `<hr><dt>${arrayKey}:</dt><hr>`); for (let object of array) { list.insertAdjacentHTML('beforeend', `<hr>`) for (let [key, value] of Object.entries(object)) { list.insertAdjacentHTML('beforeend', `<dd>${key}: ${value}</dd>`); } } } } const arrayObject = groupByKV('appName', z, y); console.log(arrayObject); domList(arrayObject);

 dd::after { content: ',' } dd:nth-of-type(4n)::after { content: '' } .as-console-wrapper { width: 350px; min-height: 100%; margin-left: 45%; } .as-console-row.as-console-row::after, .as-console-row-code.as-console-row-code::after { content:''; padding:0; margin:0; border:0; width:0; }