Create 2 Dimensional Array from Object with same key

user_6614745 0
Viewed 172

I have an array of objects that I want to transform. My dataset looks like this:

[
 {
  day: sunday,
  val: 20
 }, 
{
  day: sunday,
  val: 20
 }, 
{
  day: monday,
  val: 10
 },  
{
  day: monday,
  val: 30
 }, 
{
  day: tuesday,
  val: 5
 }, 
{
  day: tuesday,
  val: 5
 }
]

I am trying to transform the data to look like this:

Output: [[20,20], [10,30], [5, 5]]

Where each of the nested arrays are based on the Day of Week in object. Any ideas?

Thanks!

reactjs arrays javascript
5 Answers

You could group your items by their day. After you have the groups, you can grab the values of the map and map the item lists to a list of val.

const data = [
  { day: 'sunday'  , val: 20 }, { day: 'sunday'  , val: 20 },
  { day: 'monday'  , val: 10 }, { day: 'monday'  , val: 30 },
  { day: 'tuesday' , val:  5 }, { day: 'tuesday' , val:  5 }
];

const transformed = Object.values(data.reduce((map, item) =>
  ({ ...map, [item.day] : [ ...(map[item.day] || []), item]
}), {})).map(list => list.map(item => item.val));

console.log(transformed);
.as-console-wrapper { top: 0; max-height: 100% !important; }

Alternatively, you can reduce the values right away, but you lose all the item properties.

const data = [
  { day: 'sunday'  , val: 20 }, { day: 'sunday'  , val: 20 },
  { day: 'monday'  , val: 10 }, { day: 'monday'  , val: 30 },
  { day: 'tuesday' , val:  5 }, { day: 'tuesday' , val:  5 }
];

const transformed = Object.values(data.reduce((map, item) =>
  ({ ...map, [item.day] : [ ...(map[item.day] || []), item.val] }), {}));

console.log(transformed);
.as-console-wrapper { top: 0; max-height: 100% !important; }

Here is a functional version:

const data = [
  { day: 'sunday'  , val: 20 }, { day: 'sunday'  , val: 20 },
  { day: 'monday'  , val: 10 }, { day: 'monday'  , val: 30 },
  { day: 'tuesday' , val:  5 }, { day: 'tuesday' , val:  5 }
];

const toMatrix = (list, key, valFn) => Object.values(data.reduce((map, item) =>
  ({ ...map, [item[key]] : [ ...(map[item[key]] || []), valFn(item) ] }), {}))

console.log(toMatrix(data, 'day', item => item.val));
.as-console-wrapper { top: 0; max-height: 100% !important; }

user_17622240 
let myarray=[
 {
  day: 'sunday',
  val: 20
 }, 
{
  day: 'sunday',
  val: 20
 }, 
{
  day: 'monday',
  val: 10
 },  
{
  day: 'monday',
  val: 30
 }, 
{
  day: 'tuesday',
  val: 5
 }, 
{
  day: 'tuesday',
  val: 5
 }
];

let newarray=[];

for (let x of myarray) {
    if (!newarray[x.day]) { newarray[x.day]=[]; }
    newarray[x.day].push(x.val);
}

console.log(newarray);
user_96001570

Here is an example on stackblitz on how you could achieve that, and here is the code :

import React, { Component } from "react";
import { render } from "react-dom";
import * as _ from "lodash";

const App = () => {
  const data = [
    {
      day: "sunday",
      val: 20
    },
    {
      day: "sunday",
      val: 20
    },
    {
      day: "monday",
      val: 10
    },
    {
      day: "monday",
      val: 30
    },
    {
      day: "tuesday",
      val: 5
    },
    {
      day: "tuesday",
      val: 5
    }
  ];

  const groupBy = (arr, prop) => {
    const map = new Map(Array.from(arr, obj => [obj[prop], []]));
    arr.forEach(obj => map.get(obj[prop]).push(obj.val));
    return Array.from(map.values());
  };

  React.useEffect(() => {
    // groupBy from Lodash does not do exaclty what you want (but still very interesting), need to work on it a bit
    let chunks = Object.values(_.groupBy(data, 'day')).map(x => x.map(item => item.val));
    console.log(chunks);

    // Exactly what you want, but custom made by someone here :
    // https://stackoverflow.com/a/53704154/9868549
    console.log(groupBy(data, 'day'));
  }, []);

  return <div>This is a template react</div>;
};

render(<App />, document.getElementById("root"));

I found it here on another StackOverflow thread but still wanted to provide another solution with lodash.

user_98685490

This could be a solution:

var obj = [
 {
  day: 'sunday',
  val: 20
 }, 
{
  day: 'sunday',
  val: 20
 }, 
{
  day: 'monday',
  val: 10
 },  
{
  day: 'monday',
  val: 30
 }, 
{
  day: 'tuesday',
  val: 5
 }, 
{
  day: 'tuesday',
  val: 5
 }
]

var obj_output = [];
var bln_array = false;

for (i=0; i < obj.length; i++) {
  var arr = [];
    arr.push(obj[i].val);
  arr.push(obj[i+1].val);
  obj_output.push(arr);
  i = i+1
}

console.log(obj_output);

user_56402000

Here's one way to achieve this

var old = [
 { day: 'sunday',  val: 20 }, 
 { day: 'sunday',  val: 20 }, 
 { day: 'monday',  val: 10 },  
 { day: 'monday',  val: 30 }, 
 { day: 'tuesday', val:  5 }, 
 { day: 'tuesday', val:  5 }
];

var days = []; 
var result = [];
old.forEach(o => {
  if(days.indexOf(o.day) === -1) {
    days.push(o.day);
    result.push([]);
  }
  result[days.indexOf(o.day)].push(o.val);
});

console.log(result);

user_665800
Related