How should data be pushed to a section of the filtered object in an array?

Question

I'm getting a service from a server and the json that returns (see the reference) I need to disarm it to arm it according to the need that I have.

JSON FROM SERVICE

[
  {
    "id_clasificacion":"1",
    "pj_clasificacion":"0",
    "pg_clasificacion":"0",
    "pe_clasificacion":"0",
    "pp_clasificacion":"0",
    "dg_clasificacion":"0",
    "ta_clasificacion":"0",
    "tr_clasificacion":"0",
    "jl_clasificacion":"0",
    "pts_clasificacion":"0",
    "id_equipo":"1",
    "nombre_equipo":"Real Madrid CF",
    "nombre_grupo":"Grupo A"
  },
  {
    "id_clasificacion":"2",
    "pj_clasificacion":"0",
    "pg_clasificacion":"0",
    "pe_clasificacion":"0",
    "pp_clasificacion":"0",
    "dg_clasificacion":"0",
    "ta_clasificacion":"0",
    "tr_clasificacion":"0",
    "jl_clasificacion":"0",
    "pts_clasificacion":"0",
    "id_equipo":"2",
    "nombre_equipo":"Barcelona CF",
    "nombre_grupo":"Grupo B",
  },
  {
    "id_clasificacion":"3",
    "pj_clasificacion":"0",
    "pg_clasificacion":"0",
    "pe_clasificacion":"0",
    "pp_clasificacion":"0",
    "dg_clasificacion":"0",
    "ta_clasificacion":"0",
    "tr_clasificacion":"0",
    "jl_clasificacion":"0",
    "pts_clasificacion":"0",
    "id_equipo":"3",
    "nombre_equipo":"Bayern Munchen",
    "nombre_grupo":"Grupo B"
  },
  {
    "id_clasificacion":"5",
    "pj_clasificacion":"0",
    "pg_clasificacion":"0",
    "pe_clasificacion":"0",
    "pp_clasificacion":"0",
    "dg_clasificacion":"0",
    "ta_clasificacion":"0",
    "tr_clasificacion":"0",
    "jl_clasificacion":"0",
    "pts_clasificacion":"0",
    "id_equipo":"4",
    "nombre_equipo":"Atletico de Madrid",
    "nombre_grupo":"Grupo C"
  },
  {
    "id_clasificacion":"6",
    "pj_clasificacion":"0",
    "pg_clasificacion":"0",
    "pe_clasificacion":"0",
    "pp_clasificacion":"0",
    "dg_clasificacion":"0",
    "ta_clasificacion":"0",
    "tr_clasificacion":"0",
    "jl_clasificacion":"0",
    "pts_clasificacion":"0",
    "id_equipo":"5",
    "nombre_equipo":"Chelsea FC",
    "nombre_grupo":"Grupo C"
  }
];

All these data have a common characteristic, which is called "nombre_grupo" , with this I intend to organize the data in the frontend as when they are ordered with a header in alphabetical order but in this case I will use the above mentioned:

|---------------------|------------------|
|        GRUPO A      |      GRUPO B     |
|---------------------|------------------|
|     Real Madrid     |     Chelsea      |
|     Barcelona       |  Manchester City |
|     Atl. Madrid     |  Manchester Untd |

This is the type of arrangement that I should arrive with the data captured from the service:

[
 {
   grupo: Grupo A,
   equipos :
   [
     {
       id_clasificacion:'information',
       nombre_equipo:'information',
       pj_clasificacion:'information',
       pg_clasificacion:'information',
       pe_clasificacion:'information',
       pp_clasificacion:'information',
       dg_clasificacion:'information',
       ta_clasificacion:'information',
       tr_clasificacion:'information',
       jl_clasificacion:'information',
       pts_clasificacion:'information',
     }
   ]
 }
];

PROBLEM

then, my problem is that when trying to push the data to the new arrangement I do not know how to push them to the corresponding section, in this case it inserts them as a new object, but it must belong to the corresponding category:

0: Object { name_group: "Grupo A", teams_group: (1) […] }​
1: Object { name_group: "Grupo B", teams_group: (1) […] }​
2: Object { name_group: "Grupo B", teams_group: (1) […] }​
3: Object { name_group: "Grupo C", teams_group: (1) […] }​
4: Object { name_group: "Grupo C", teams_group: (1) […] }

WHAT I'VE DONE?

//Recorremos los datos obtenidos
for (var i = 0; i < data.length; i++)
  {
    //Evaluamos si el arreglo no tiene datos
    if (this.list_groups.length == 0)
    {
      //Empujamos el primer valor para llenar el arreglo
      this.list_groups.push(
        {
          name_group: data[i].nombre_grupo,
          teams_group: [
            {
              id_clasificacion:data[i].id_clasificacion,
              nombre_equipo:data[i].nombre_equipo,
              pj_clasificacion:data[i].pj_clasificacion,
              pg_clasificacion:data[i].pg_clasificacion,
              pe_clasificacion:data[i].pe_clasificacion,
              pp_clasificacion:data[i].pp_clasificacion,
              dg_clasificacion:data[i].dg_clasificacion,
              ta_clasificacion:data[i].ta_clasificacion,
              tr_clasificacion:data[i].tr_clasificacion,
              jl_clasificacion:data[i].jl_clasificacion,
              pts_clasificacion:data[i].pts_clasificacion
            }
          ]
        }
      );
    }
    else
    {
      //Filtramos el arreglo
      let approved = this.list_groups.filter(element => element.name_group == data[i].nombre_grupo);

      //Evaluamos si el arreglo obtuvo un valor vacio
      if (approved.length == 0)
      {
        //Empujamos el valor al arreglo final
        this.list_groups.push(
          {
            name_group: data[i].nombre_grupo,
            teams_group: [
              {
                id_clasificacion:data[i].id_clasificacion,
                nombre_equipo:data[i].nombre_equipo,
                pj_clasificacion:data[i].pj_clasificacion,
                pg_clasificacion:data[i].pg_clasificacion,
                pe_clasificacion:data[i].pe_clasificacion,
                pp_clasificacion:data[i].pp_clasificacion,
                dg_clasificacion:data[i].dg_clasificacion,
                ta_clasificacion:data[i].ta_clasificacion,
                tr_clasificacion:data[i].tr_clasificacion,
                jl_clasificacion:data[i].jl_clasificacion,
                pts_clasificacion:data[i].pts_clasificacion
              }
            ]
          }
        );
      }
      else
      {
        //Empujamos el valor al arreglo final
        this.list_groups.push(
          {
            name_group: data[i].nombre_grupo,
            teams_group: [
              {
                id_clasificacion:data[i].id_clasificacion,
                nombre_equipo:data[i].nombre_equipo,
                pj_clasificacion:data[i].pj_clasificacion,
                pg_clasificacion:data[i].pg_clasificacion,
                pe_clasificacion:data[i].pe_clasificacion,
                pp_clasificacion:data[i].pp_clasificacion,
                dg_clasificacion:data[i].dg_clasificacion,
                ta_clasificacion:data[i].ta_clasificacion,
                tr_clasificacion:data[i].tr_clasificacion,
                jl_clasificacion:data[i].jl_clasificacion,
                pts_clasificacion:data[i].pts_clasificacion
              }
            ]
          }
        );
      }
    }
  }
  console.log("Data: ", this.list_groups);

Logical sequence:

1. Go through the arrangement obtained from the service
2. Evaluate if the secondary array has data equal to 0
   2.1 if you do not have data, you enter the first value obtained by default
   2.2 if it contains data, the secondary array is filtered to identify some match
    2.2.1 if it finds a match, then it will be added only to the found group section.
    2.2.2 if there is no match, the object is registered in the secondary array

Note: If you think there is something to improve in the attached code, let me know. Thank you

Answer 1

If I understand the question correctly, you are trying to put each item of the received JSON under their respective groups.

You can do this in the following way:

// Store JSON data from the service in 'data' variable.
var data; 

var groupsMap = new Map();

// Iterate over the data array.
data.forEach((element) => {

   const groupName = element.nombre_grupo;

   delete element.nombre_grupo;

   var value;

   // If group already exists in the map, get current value.
   if (groupsMap.has(groupName)) {

     value = groupsMap.get(groupName);

   } else {
       value = {
         'grupo': groupName,
         'equipos': []
       };
   }

   // Add current element to the group's equipos list.
   value.equipos.push(element);

   // Add updated value to the map.
   groupsMap.set(groupName, value);
});

Now, we have a map with group names as keys, and their respective values in the required format.

We can iterate over the map to access those values.

Hope this helps. Let me know if you have any questions.