javascript - 应该如何将数据推送到数组中过滤对象的一部分？

Question

我正在从服务器和返回的 json 获取服务(请参阅引用资料)我需要解除它以根据我的需要武装它。

来自服务的 JSON

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

所有这些数据都有一个共同的特征，称为 "nombre_grupo"，因此我打算在前端组织数据，就像它们按字母顺序用标题排序一样，但在这个案例我将使用上面提到的:

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

这是我应该使用从服务捕获的数据到达的安排类型:

[
 {
   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',
     }
   ]
 }
];

问题

然后，我的问题是，当试图将数据推送到新排列时，我不知道如何将它们推送到相应的部分，在这种情况下，它将它们作为一个新对象插入，但它必须属于相应的部分类别:

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) […] }

我做了什么？

//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);

逻辑顺序:

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

如果我对问题的理解正确，您是在尝试将接收到的 JSON 的每个项目放在各自的组中。

您可以通过以下方式执行此操作:

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

现在，我们有一个映射，其中组名作为键，它们各自的值采用所需的格式。

我们可以遍历 map 以访问这些值。

希望这对您有所帮助。如果您有任何问题，请告诉我。