Fusionner les données d'une carte dans un tableau en javascript

Question

Voici à quoi ressemble mon Array actuel :

{ entity: 'A', type: 'request', requestUrl: 'val1' },
{ entity: 'A', type: 'response', responseUrl: 'val1' },
{ entity: 'B', type: 'request', requestUrl: 'val1' },
{ entity: 'B', type: 'response', responseUrl: 'val1' },
{ entity: 'C', type: 'request', requestUrl: 'val1' },
{ entity: 'C', type: 'response', responseUrl: 'val1' },
{ entity: 'D', type: 'request', requestUrl: 'val1' },
{ entity: 'D', type: 'response', responseUrl: 'val1' },
{ entity: 'DADA', type: '', responseUrl: 'val1' }

Chaque ligne contient un attribut nommé 'entity' qui a 2 lignes : l'une correspondant à la demande et l'autre à la réponse. J'ai besoin de fusionner les lignes de demande et de réponse, et d'avoir les données sur une seule ligne. (L'attribut 'type' n'a pas d'importance dans la ligne fusionnée, mais tous les autres attributs doivent être présents). La solution serait donc quelque chose comme :

[{"entity":"A","type":"response","requestUrl":"val1","responseUrl":"val1"},
{"entity":"B","type":"response","requestUrl":"val1","responseUrl":"val1"},
{"entity":"C","type":"response","requestUrl":"val1","responseUrl":"val1"},
{"entity":"D","type":"response","requestUrl":"val1","responseUrl":"val1"}]

Voici ce que j'ai actuellement : https://www.w3schools.com/code/tryit.asp?filename=FUHGQN2JON75

Je ne sais pas si c'est la meilleure façon de procéder. Les recommandations sur la manière d'améliorer cette solution sont les bienvenues.

Merci.

Answer 1

Une option consiste à utiliser reduce pour regrouper votre tableau dans un objet. Utilisez la fonction entity comme clé. Utiliser Object.assign pour convertir les objets. Utiliser Object.values pour convertir l'objet en tableau.

var arr = [{"entity":"A","type":"request","requestUrl":"val1"},{"entity":"A","type":"response","responseUrl":"val1"},{"entity":"B","type":"request","requestUrl":"val1"},{"entity":"B","type":"response","responseUrl":"val1"},{"entity":"C","type":"request","requestUrl":"val1"},{"entity":"C","type":"response","responseUrl":"val1"},{"entity":"D","type":"request","requestUrl":"val1"},{"entity":"D","type":"response","responseUrl":"val1"},{"entity":"DADA","type":"","responseUrl":"val1"}];

var result = Object.values(arr.reduce((c, v) => {
  c[v.entity] = Object.assign(c[v.entity] || {}, v);
  return c;
}, {}));

console.log(result);

Answer 2

Vous pouvez utiliser Array.reduce() pour cela :

var arr = [{ entity: 'A', type: 'request', requestUrl: 'val1' },
{ entity: 'A', type: 'response', responseUrl: 'val1' },
{ entity: 'B', type: 'request', requestUrl: 'val1' },
{ entity: 'B', type: 'response', responseUrl: 'val1' },
{ entity: 'C', type: 'request', requestUrl: 'val1' },
{ entity: 'C', type: 'response', responseUrl: 'val1' },
{ entity: 'D', type: 'request', requestUrl: 'val1' },
{ entity: 'D', type: 'response', responseUrl: 'val1' },
{ entity: 'DADA', type: '', responseUrl: 'val1' }];
var res = arr.reduce((acc, item)=>{
  var existObj = acc.find(obj => obj.entity === item.entity);
  if(!existObj){
    acc.push(item);
  } else {
     existObj['responseUrl'] = item.responseUrl;
  }
  return acc;
}, []);
console.log(res);

Answer 3

Vous pouvez utiliser cette réponse

var arr = [{ entity: 'A', type: 'request', requestUrl: 'val1' },
{ entity: 'A', type: 'response', responseUrl: 'val1' },
{ entity: 'B', type: 'request', requestUrl: 'val1' },
{ entity: 'B', type: 'response', responseUrl: 'val1' },
{ entity: 'C', type: 'request', requestUrl: 'val1' },
{ entity: 'C', type: 'response', responseUrl: 'val1' },
{ entity: 'D', type: 'request', requestUrl: 'val1' },
{ entity: 'D', type: 'response', responseUrl: 'val1' },
{ entity: 'DADA', type: '', responseUrl: 'val1' }];

var res = Array.from(
  new Set(arr.filter(x => x.type).map(x=>x.entity))
)
.map(el => arr.find(obj => obj.entity === el))

console.log(res);// 
/* 
[{"entity":"A","type":"request","requestUrl":"val1"},
{"entity":"B","type":"request","requestUrl":"val1"},
{"entity":"C","type":"request","requestUrl":"val1"},
{"entity":"D","type":"request","requestUrl":"val1"}]
*/

Answer 4

Vous pouvez utiliser un Carte qui garde la trace de tous les objets de l'entité.

Plus tard, vous pourrez convertir le Map dans un tableau.

const input = [
  { entity: 'A', type: 'request', requestUrl: 'val1' },
  { entity: 'A', type: 'response', responseUrl: 'val1' },
  { entity: 'B', type: 'request', requestUrl: 'val1' },
  { entity: 'B', type: 'response', responseUrl: 'val1' },
  { entity: 'C', type: 'request', requestUrl: 'val1' },
  { entity: 'C', type: 'response', responseUrl: 'val1' },
  { entity: 'D', type: 'request', requestUrl: 'val1' },
  { entity: 'D', type: 'response', responseUrl: 'val1' },
  { entity: 'DADA', type: '', responseUrl: 'val1' }
]

const entityMap = new Map();
input.forEach(element => {
  let currentEntity = entityMap.get(element.entity) || {};

  entityMap.set(element.entity, {
    ...currentEntity,
    ...element,
  })
});

return Array.from(entityMap.values());

Answer 5

Vous pouvez utiliser Map y forEach() :

let data = [{ entity: 'A', type: 'request', requestUrl: 'val1' },{ entity: 'A', type: 'response', responseUrl: 'val1' },{ entity: 'B', type: 'request', requestUrl: 'val1' },{ entity: 'B', type: 'response', responseUrl: 'val1' },{ entity: 'C', type: 'request', requestUrl: 'val1' },{ entity: 'C', type: 'response', responseUrl: 'val1' },{ entity: 'D', type: 'request', requestUrl: 'val1' },{ entity: 'D', type: 'response', responseUrl: 'val1' }];

let result = ((a, m) => {
  a.forEach(o => {
    m.set(o.entity, Object.assign((m.get(o.entity) || {}), o));
  });
  return [...m.values()];
})(data, new Map());

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }