javascript aggregate by value and get aggregated result in a array

Question

  data = [
    {
      "data": {
        "data": [
          {
            "Id": "47",
            "SepalLengthCm": "5.1",
            "SepalWidthCm": "3.8",
            "PetalLengthCm": "1.6",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          },
          {
            "Id": "48",
            "SepalLengthCm": "4.6",
            "SepalWidthCm": "3.2",
            "PetalLengthCm": "1.4",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "pie3d-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
    }, {
      "data": {
        "data": [
          {
            "Id": "47",
            "SepalLengthCm": "5.1",
            "SepalWidthCm": "3.8",
            "PetalLengthCm": "1.6",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          },
          {
            "Id": "48",
            "SepalLengthCm": "4.6",
            "SepalWidthCm": "3.2",
            "PetalLengthCm": "1.4",
            "PetalWidthCm": "0.2",
            "Species": "setosa"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "bar-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
    },  {
      "data": {
        "data": [
          {
            "name": "carry",
            "id": "5",
          },
          {
            "name": "ethen",
            "SepalLengthCm": "10"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_type": "funnel-chart",
      "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cQ=="
    }
  ]



  output = [
    {
      "data": [
        {
          "Id": "47",
          "SepalLengthCm": "5.1",
          "SepalWidthCm": "3.8",
          "PetalLengthCm": "1.6",
          "PetalWidthCm": "0.2",
          "Species": "setosa"
        },
        {
          "Id": "48",
          "SepalLengthCm": "4.6",
          "SepalWidthCm": "3.2",
          "PetalLengthCm": "1.4",
          "PetalWidthCm": "0.2",
          "Species": "setosa"
        }
      ],
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_types": ["pie3d-chart","bar-chart"]
    }, {
      "data": {
        "data": [
          {
            "name": "carry",
            "id": "5",
          },
          {
            "name": "ethen",
            "SepalLengthCm": "10"
          }
        ]
      },
      "value": "PetalWidthCm",
      "category": "Species",
      "chart_types": ["funnel-chart"]
    }
  ]

Hi i have following data structure and i wants to aggregate chart_types using unique_datasource_token and expecting chart_types in an array using all unique_datasource_token.

Seems like data structure is bot complex not able to find a way to achieve this

Please help me with a efficient way to achieve this result

Answer 1

You can use Array.prototype.reduce() and iterate through your array.

1. Create an object which holds group for unique_datasource_token and give property name = value of unique_datasource_token.
2. If property doesn't exist then create a new and copy data, value, etc. Add chart_types as an array. And push value of current i.chart_type.
3. If property exists then simply push value of current i.chart_type.
4. Output will be an object so convert it to array with Object.values.

var data = [{
  "data": {
    "data": [{
        "Id": "47",
        "SepalLengthCm": "5.1",
        "SepalWidthCm": "3.8",
        "PetalLengthCm": "1.6",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      },
      {
        "Id": "48",
        "SepalLengthCm": "4.6",
        "SepalWidthCm": "3.2",
        "PetalLengthCm": "1.4",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "pie3d-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
}, {
  "data": {
    "data": [{
        "Id": "47",
        "SepalLengthCm": "5.1",
        "SepalWidthCm": "3.8",
        "PetalLengthCm": "1.6",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      },
      {
        "Id": "48",
        "SepalLengthCm": "4.6",
        "SepalWidthCm": "3.2",
        "PetalLengthCm": "1.4",
        "PetalWidthCm": "0.2",
        "Species": "setosa"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "bar-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cGUiOiJjc3YiLCJjb21wYW55X2lkIjoxfQ=="
}, {
  "data": {
    "data": [{
        "name": "carry",
        "id": "5",
      },
      {
        "name": "ethen",
        "SepalLengthCm": "10"
      }
    ]
  },
  "value": "PetalWidthCm",
  "category": "Species",
  "chart_type": "funnel-chart",
  "unique_datasource_token": "eyJmaWxlX2lkIjozLCJmaWxlX25hbWUiOiJpcmlzIGRhdGEiLCJmaWxlX3R5cQ=="
}];

var r = data.reduce((a, i) => {
  if (!a[i.unique_datasource_token]) {
    a[i.unique_datasource_token] = {
      data: i.data,
      value: i.value,
      category: i.category,
      unique_datasource_token: i.unique_datasource_token,
      chart_types: [i.chart_type]
    };
  } else {
    a[i.unique_datasource_token].chart_types.push(i.chart_type);
  }
  return a;
}, {});

r = Object.values(r);

console.log(r);