Как сделать push-элементы из двух разных массивов с одинаковым appName внутри нового массива в JavaScript

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

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>

Всего 2 ответа


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

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

    // result pattern
    {
      "CapLogix": [{
        "appId": "1",
        "appName": "CapLogix",
        "envId": "970",
        "envName": "UAT4"
    }, {...}],...}
    
  • Используйте 3 for...of циклов для рендеринга с помощью .insertAdjacentHTML() :

    1. <dt> для каждого имени массива, например <hr><dt>CapLogix</dt><hr>
    2. <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;
}


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

Это в основном получает значения, которые присутствуют как в 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>


Есть идеи?

10000