5

Estou com dificuldades para agrupar alguns dados utilizando o JavaScript.

Possuo o seguinte array de objetos que retorno do banco de dados e envio para a view:

var object = [
    { data: 1, categories: "Branca", name: "Feminino" },
    { data: 1, categories: "Parda", name: "Masculino" },
    { data: 2, categories: "Branca", name: "Masculino" },
];

A partir dele, preciso gerar outros dois arrays agrupados, para que envie para um gráfico em Highcharts.

Gostaria de chegar no seguinte resultado:

categories: ["Parda", "Branca"]

series: [{
    name: "Masculino",
    data: [1, 2]
}, {
    name: "Feminino",
    data: [0, 1]
}]

Já testei algumas possibilidades, fiz o array de categories, foi bem simples, mas o array de series que complicou.

Alguém poderia me ajudar? Desde já agradeço!

3
  • Por que o Feminino precisa ter as datas 0 e 1? Qual é a lógica das datas?
    – Andre
    Commented 9/11/2018 às 0:48
  • A lógica das datas segue a ordem dos categories. Ex: Olhando pelo array original, o masculino quando Parda, tem o data 1, e quando Branca o data 2. Já o Feminino não possui valor quando Parda, logo seu data é 0, e possui quando Branca o data 1. Commented 9/11/2018 às 0:52
  • Tácio você pode da uma olhada nesse link que talvez poderá te ajudar: GroupBy E creio que esse post que encontrei poderá ajudar bastante: stackoverflow.com/questions/21776389/javascript-object-grouping Commented 9/11/2018 às 12:52

2 Respostas 2

7

Tem muitas formas de agrupar, vou optar por mostrar uma com reduce. Como as suas categorias estão ligadas aos valores em data de acordo com as posições o código acaba a ser um pouco mais complicado do que normalmente seria, mas a lógica é a seguinte:

  • Cosntruir todas as categorias que existem nos dados iniciais
  • Percorrer cada objeto nesses dados
  • Se o tipo do objeto (masc/fem) ainda não existe no array então adiciona uma nova entrada
  • Se já existe apenas atualiza o valor da data
  • Quando adiciona, no objeto adicionado é criado um array de data todo a zeros com a mesma quantidade que as categorias

Exemplo:

const objects = [
    { data: 1, categories: "Branca", name: "Feminino" },
    { data: 1, categories: "Parda", name: "Masculino" },
    { data: 2, categories: "Branca", name: "Masculino" },
];

//construir primeiro todas as categorias existentes
const categories = [];
for (let obj of objects){ 
    if (!categories.includes(obj.categories)){
        categories.push(obj.categories);
    }
}

//agrupar os valores para as series com reduce
const series = objects.reduce((acc, val) => {
    let index = acc.map((o) => o.name).indexOf(val.name); //posicao do fem/masc
    let categoryIndex = categories.indexOf(val.categories); //posicao da categoria

    if (index === -1){ //se não existe 
        let newSeries = {
            name: val.name,
            data: new Array(categories.length).fill(0)
        }; //novo objeto para fem/masc já com um array de data todo a zeros
        
        //coloca o valor na posição correspondente à categoria
        newSeries.data[categoryIndex] = val.data; 
        acc.push(newSeries); //e adiciona o novo objeto à serie
    }
    else { 
        acc[index].data[categoryIndex] = val.data; //troca só o valor na data
    }

    return acc;
}, []); //inicia o reduce com array vazio

console.log(series, categories);

Para a criação do array todo a zeros optei pelo construtor de Array que recebe a quantidade de elementos a criar e subsequente método fill para preencher.

2
  • Testei sua solução com mais objetos no array e diferentes formas, ela funciona perfeitamente. Estudei seu código para entendimento, e gostei muito. Muito obrigado! Commented 9/11/2018 às 10:10
  • @TácioBrito Sem problema, estamos cá para ajudar :)
    – Isac
    Commented 9/11/2018 às 10:22
4

var object = [
    { data: 1, categories: "Branca", name: "Feminino" },
    { data: 1, categories: "Parda", name: "Masculino" },
    { data: 2, categories: "Branca", name: "Masculino" },
];

var categories = [...new Set(object.map(a => a.categories))]

var series = [];
object.filter((thing, index, self) => index === self.findIndex((t) => (t.name === thing.name))).filter(arr => {
  var data = [];
  object.filter(obj => {
    if (obj.name === arr.name) {
      data.push(obj.data)
    }
  });
  series.push({
    name: arr.name,
    data: data
  });
});

var max = series.reduce((a, b) => Math.max(a.data.length, b.data.length));

series.filter(serie => {
  var newData = [];
  if (serie.data.length < max) {
    while (newData.length < (max - serie.data.length)) {
      newData.push(0);
    }
    newData = [...newData, ...serie.data];
  }
  if (newData.length > 0) {
    serie.data = newData;
  }
});


console.log(categories, series);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .