как сделать элементы pu sh из двух разных массивов с одинаковым appName внутри нового массива в javascript

Question

Это два массива с некоторыми данными

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"
  }
];

Это то, что я пробовал до сих пор. Мне нужен новый массив с элементами, имеющими одно и то же имя appName, из двух массивов в новый массив.

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

Проверьте фрагмент,

Это в основном получает значения, которые присутствуют как в z, так и y, затем создает новый массив. Этот новый массив затем фильтруется для получения уникального значения.

Вы можете добавить блок ниже, если вам нужны только уникальные значения в новом массиве.

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

• Используйте .concat() для объединения обоих массивов.

  z.concat(y)
  

• Используйте .reduce() для сгруппировать все объекты с совпадающими значениями appName в свои отдельные массивы. Чтобы сохранить каждое имя массива, все они должны быть возвращены внутри одного литерала объекта.

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

• Используйте 3 for...of loop для рендеринга с .insertAdjacentHTML():

  1. a <dt> для каждого имени массива, например <hr><dt>CapLogix</dt><hr>
  2. a <hr> для каждого объекта
  3. <dd> для каждой пары ключ / значение, напр. <dd>"envName": "UAT4"</dd>

• Object.entries() использовался для преобразования объектных литералов в массив массивов

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;
}