Merging an array with an object array

Question

let apis = [{id: "1", name"api 1"}, {id: "2", name:"api 2"}, {id: "3", name:"api 3"}];


let applications = [{id: "1", name:"application 01", apis: ["1", "2"]}, {id: "2", name: "application 02", apis: ["2", "3"]}]

I’d like a result like that:

 let resultado = [
{id: "1", name: "application 01", apis: [{id: "1", name:"api 1"}, {id: "2", name:"api 2"}]}, 
{id: "2", name: "application 02", apis: [{id: "2", name:"api 2"}, {id: "3", name:"api 3"}]}]

I am wanting each api to enter its respective application. I’m a little confused on the ideas still, I’m thinking you’ll probably have to use a reduce, but I don’t know how... Could you help me please

Answer 1

You need to iterate through all 'Applications' elements and for each of them to check all 'Apis'':

let apis = [{id: "1", name: "api 1"}, {id: "2", name:"api 2"}, {id: "3", name:"api 3"}];
let applications = [{id: "1", name:"application 01", apis: ["1", "2"]}, {id: "2", name: "application 02", apis: ["2", "3"]}];

//pasando por todos os 'applications'
resultado = applications.map(function(app) {
  //cada iteração, aqui dentro, um dos elementos de 'applications' é chamado de 'app'
  //abaixo, filtrando as 'apis' conforme o vetor 'apis' dentro do 'app'
  apisSelecionadas = apis.filter(function(api) {
    //só retorna do 'apis' (principal) os elementos que existam dentro da propriedade 'apis' do 'app' 
    return app.apis.indexOf(api.id) !== -1;
  });
  //coloco o resultado no 'app'
  app.apis = apisSelecionadas;

  return app;
});

console.log(resultado)

Answer 2

An option would be to iterate over each element of applications and, for each iteration, search in the array apis, the object api correspondent:

function groupApplicationApi(applications, apis) {
  // Cria um novo array para não modificar o original:
  const resultingArray = [];

  for (const application of applications) {
    // Também criamos um novo objeto para não modificar o original:
    const applicationObj = { ...application };
    const apiObjs = [];

    for (const apiId of applicationObj.apis) {
      const apiObj = apis.find((api) => api.id === apiId);

      // Se não existir API correspondente, não faça nada:
      if (!apiObj) {
        continue;
      }

      apiObjs.push(apiObj);
    }

    // Adiciona as apis ao novo objeto:
    applicationObj.apis = apiObjs;

    // Adiciona o novo objeto no array resultante:
    resultingArray.push(applicationObj);
  }

  return resultingArray;
}

const apis = [
  { id: '1', name: 'api 1' },
  { id: '2', name: 'api 2' },
  { id: '3', name: 'api 3' }
];

const applications = [
  { id: '1', name: 'application 01', apis: ['1', '2'] },
  { id: '2', name: 'application 02', apis: ['2', '3'] }
];

console.log(
  groupApplicationApi(applications, apis)
);

But, in general, the above algorithm is not very performatic, since for each element of applications, iterate (worst-case) on each element of apis.

Thus, the complexity is O(m * n), being m the number of elements of applications and n the number of elements of apis.

You can do in O(m + n), which is undoubtedly better - despite causing slight cost in memory, since we will have to maintain a dictionary with each element of apis available, indexed by its ID.

Anyway, so:

function groupApplicationApi(applications, apis) {
  const apiDict = Object.create(null); // Cria o dicionário:
  for (const api of apis) {
    apiDict[api.id] = api;
  }

  const resultingArray = [];
  for (const application of applications) {
    const applicationObj = { ...application };
    
    const apiObjs = [];
    for (const apiId of applicationObj.apis) {
      // Note que não utilizamos o `find` (O(n)), apenas uma indexação (O(1)).
      const apiObj = apiDict[apiId];

      if (!apiObj) {
        continue;
      }

      apiObjs.push(apiObj);
    }

    applicationObj.apis = apiObjs;
    resultingArray.push(applicationObj);
  }

  return resultingArray;
}

const apis = [
  { id: '1', name: 'api 1' },
  { id: '2', name: 'api 2' },
  { id: '3', name: 'api 3' }
];

const applications = [
  { id: '1', name: 'application 01', apis: ['1', '2'] },
  { id: '2', name: 'application 02', apis: ['2', '3'] }
];

console.log(
  groupApplicationApi(applications, apis)
);

---

^{Note that in the two examples above, I avoided trying to modify the original elements. Whenever a modification was required in the code, it was made in a "copy", not in the original. However, the references to the objects of apis were maintained.}

Answer 3

Another alternative would be to index each element of the array apis for his id and use each value of applications.apis key to this index.

let apis = [
  {id: "1", name: "api 1"}, 
  {id: "2", name: "api 2"}, 
  {id: "3", name: "api 3"}
];

let applications = [
  {id: "1", name: "application 01", apis: ["1", "2"]}, 
  {id: "2", name: "application 02", apis: ["2", "3"]}
];
   
let index = [];
let result = [];

//Indexa cada elemento de apis pelo seu id.
for(let e of apis){
  index[e.id] = e;  
  //index[e.id] = {...e};  //caso queira criar um objeto novo ao invés de referenciar os objetos já existentes use essa linha. 
}

//Para cada elemento de applications...
for(let e of applications){
  let apis=[]                          //...inicializa a lista que receberá as substituições para esse elemento.
  //...para cada um dos valores em e.apis...
  for(let v of e.apis){
    apis.push(index[v])                //...obtém o elemento indexado pelo valor e salva em apis.
  }
  //Monta o resultado.
  result.push({"id":e["id"],"name":e["name"],"apis":apis})
}

for(var e of result){console.log(e)}

The same code above in functional version.

let apis = [
  {id: "1", name: "api 1"}, 
  {id: "2", name: "api 2"}, 
  {id: "3", name: "api 3"}
];

let applications = [
  {id: "1", name: "application 01", apis: ["1", "2"]}, 
  {id: "2", name: "application 02", apis: ["2", "3"]}
];

let index = apis.reduce((r,e)=>{
  r[e.id]= e;
  //r[e.id] = {...e};  //caso queira criar um objeto novo ao invés de referenciar os objetos já existentes use essa linha.
  return r;
},[]);

let result = applications.reduce((r,e)=>{
  let apis= e.apis.reduce((r,e)=>{
    r.push(index[e]);
    return r
  },[]);   
  r.push({"id":e["id"],"name":e["name"],"apis":apis})
  return r
},[]);    

for(var e of result){console.log(e)}

Answer 4

Due to the numerous comments, to try to explain better I will write an answer, if you find that help is here, otherwise we can remove.

I’ll take for example the answer code of @Augustovasques:

let apis = [
  {id: "1", name: "api 1"}, 
  {id: "2", name: "api 2"}, 
  {id: "3", name: "api 3"}
];

let applications = [
  {id: "1", name: "application 01", apis: ["1", "2"]}, 
  {id: "2", name: "application 02", apis: ["2", "3"]}
];
   
let index = [];
let result = [];

//Indexa cada elemento de apis pelo seu id.
for(let e of apis){
  index[e.id] = e;
}

//Para cada elemento de applications...
for(let e of applications){
  let apis=[]                          //...inicializa a lista que receberá as substituições para esse elemento.
  //...para cada um dos valores em e.apis...
  for(let v of e.apis){
    apis.push(index[v])                //...obtém o elemento indexado pelo valor e salva em apis.
  }
  //Monta o resultado.
  result.push({"id":e["id"],"name":e["name"],"apis":apis})
}

// Aqui, vai apontar a tal "dependencia circular" com /**id:5**/
console.log(result);
/*
Isso indica que, um mesmo objeto tem referência ao mesmo objeto "filho" (nesse caso, "apis") em pontos diferentes. Isso é demonstrado alterando esse objeto com a mesma referência.
Veja que será alterado um elemento, mas ao serializar, TODAS as referências são alteradas.
*/

console.log("Agora vai ser alterado um único objeto:");

result[0].apis[1].name = "bananas";

console.log(JSON.parse(JSON.stringify(result)))

Notice that when changing a single object, everyone who has the same reference is changed. This in a language with C# is something clear to understand, because objects have reffers to others.

As @Luiz Felipe commented, it is a name that does not fit very well for this, but this is how I have read and this is what is called, for example in these links:

https://stackoverflow.com/questions/14962018/detecting-and-fixing-circular-references-in-javascript

https://dev.to/salyadav/deep-clone-of-js-objects-with-circular-dependency-4if7

I only commented to alert to a common fact and that has several questions including here in Sopt about changing objects with the same reference, for example:

var obj1 = new AlgumaClasse();
obj1.Nome = "Batatas";
obj2 = obj1;
obj2.Nome = "Bananas";

// logo, por referência, obj1.Nome também será igual a "Bananas"

Answer 5

You can use the map array to map your object according to the model you want to display:

let apis = [
  {id: "1", name: "api 1"}, 
  {id: "2", name: "api 2"}, 
  {id: "3", name: "api 3"}
];

let applications = [
  {id: "1", name: "application 01", apis: ["1", "2"]}, 
  {id: "2", name: "application 02", apis: ["2", "3"]}
];

var collection = [];

 collection[0] = apis.map((val) => {
  return {
     id:val.id,
     name:val.name,
     apis:(val.apis) ? val.apis : []
  }
});

collection[1] = applications.map((val) => {
  return {
     id:val.id,
     name:val.name,
     apis:val.apis
  }
});

console.log(collection)