how to dynamically take the group name and make a loop javascript

Question

I am trying to group and then dynamically ungroup and then create a loop with each element of the group. but I've looked at several examples and couldn't solve the question below.

I am grouping using the "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);
      }
    }

how to get groups['group1'] and other group dynamically and extract to for??

Answer 1

Try

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

Answer 2

You can use 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);

Answer 3

I guess I know what you mean, you could use for...in followed by for...of

The for...in statement iterates over all non-Symbol, enumerable properties of an object.

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

Here is a snippet

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