如何动态获取组名并制作循环javascript答案

【问题标题】：how to dynamically take the group name and make a loop javascript如何动态获取组名并制作循环javascript
【发布时间】：2019-11-08 17:48:49
【问题描述】：

我正在尝试分组，然后动态取消分组，然后使用组中的每个元素创建一个循环。但我查看了几个示例，无法解决以下问题。

我正在使用“tipo”进行分组。

      const list = [
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Tempestade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Tempestade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Baixa Umidade",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Chuvas Intensas",
        id: "11313"
      },
      {
        alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
        perigo: "Perigo",
        cor: "#FF7F00",
        tipo: "Chuvas Intensas",
        id: "11313"
      }
    ];

    const groups = list.reduce((groups, item) => ({
      ...groups,
      [item.tipo]: [...(groups[item.tipo] || []), item]
    }), {});

    if (typeof groups['Tempestade'] != 'undefined') {
      groups['Tempestade'].reverse();
      for(var i=0; i<groups['Tempestade'].length; i++){
        var splot = groups['Tempestade'][i].alerta.split('.');
        console.log(splot);
      }
    }

如何动态获取groups['group1']等group并提取到for??

【问题讨论】：

动态取消分组然后循环是什么意思？按组划分，组完成后的预期输出是什么？您可以分享您尝试为此功能实现的代码吗？
显示要从给定输入列表中获取的对象（或 JSON）输出
@SagarAgrawal 我不希望能够动态获取组 ['Tempestade'] 而无需创建。因为他已经在群里了。
@KamilKiełczewski 我需要 ["INMET publica aviso iniciando em: 08/11/2019 12:00...entos intensos (60-100 km/h), e queda de granizo", ""]
@SylvioNeto 编辑您的问题 - 并添加完整的输出对象（给定列表）

标签： javascript jquery arrays json

【解决方案1】：

我想我知道你的意思，你可以使用for...in 后跟for...of

for...in 语句遍历对象的所有非符号、可枚举属性。

for...of 语句创建一个循环遍历可迭代对象，包括：内置 String、Array、类数组对象（例如，参数或 NodeList）、TypedArray、Map、设置和用户定义的可迭代对象。它调用一个自定义迭代钩子，其中包含要为对象的每个不同属性的值执行的语句。

这是一个sn-p

const list = [{
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  }
];

const groups = list.reduce((groups, item) => ({
  ...groups,
  [item.tipo]: [...(groups[item.tipo] || []), item]
}), {});

// This is the loop you were looking for (Dynamically loop over groups)
for(groupName in groups) {
  console.log(`Showing elements in group ${groupName}`)
  for (element of groups[groupName]) {
    console.log (`Element of ${groupName}`, element);
  }
}

【讨论】：

【解决方案2】：

你可以使用reduce method

 const list = [
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Tempestade",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Tempestade",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Baixa Umidade",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Baixa Umidade",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Baixa Umidade",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Chuvas Intensas",
            id: "11313"
          },
          {
            alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
            perigo: "Perigo",
            cor: "#FF7F00",
            tipo: "Chuvas Intensas",
            id: "11313"
          }
        ];


    let result = list.reduce((acc, c) => {
        acc[c.tipo] = (acc[c.tipo] || []);
        acc[c.tipo].push(c);
        return acc;
    }, {});

    console.log(result);

【讨论】：

【解决方案3】：

试试

h={};
list.forEach(o=> h[o.tipo] = (h[o.tipo]||[]).concat(o) );

for(let group in h) {
  console.log('\n\nGroup:', group);
  for(obj of h[group]) {
    console.log('alerta:',obj.alerta)
  };
}

const list = [{
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Tempestade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Baixa Umidade",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  },
  {
    alerta: "INMET publica aviso iniciando em: 08/11/2019 12:00…entos intensos (60-100 km/h), e queda de granizo.",
    perigo: "Perigo",
    cor: "#FF7F00",
    tipo: "Chuvas Intensas",
    id: "11313"
  }
];

h={};
list.forEach(o=> h[o.tipo] = (h[o.tipo]||[]).concat(o) );

for(let group in h) {
  console.log('\n\nGroup:', group);
  for(obj of h[group]) {
    console.log('alerta:',obj.alerta)
  };
}

【讨论】：