как динамически взять имя группы и сделать цикл JavaScript

Question

Я пытаюсь сгруппировать, а затем динамически разгруппировать, а затем создать цикл с каждым элементом группы. но я посмотрел на несколько примеров и не смог решить вопрос ниже.

Я группирую, используя "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);
      }
    }

как получить группы ['group1']и другую группу динамически и извлекаем для за

Answer 1

Вы можете использовать метод уменьшения

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

Answer 2

Я думаю, я знаю, что вы имеете в виду, вы могли бы использовать для ... в , а затем для ... из

* 1008оператор * for ... in выполняет итерацию по всем не-символическим перечисляемым свойствам объекта.

оператор for ... of создает цикл, повторяющийся по итерируемым объектам,в том числе: встроенные String, Array, массивоподобные объекты (например, аргументы или NodeList), TypedArray, Map, Set и определяемые пользователем итерации. Он вызывает пользовательский итерационный хук с инструкциями, которые должны выполняться для значения каждого отдельного свойства объекта.

Вот фрагмент

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

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