Transform object array to new array structure

Question

Apologies but I am learning array manipulation, tried a few things as I have done similar before but just cant figure this out. I am building a react application and have got my data back from the UI but need to reformat for the API. My payload looks like this...

0: {from: "U20", Id: "1922", to: "U21"}
1: {from: "U20", Id: "9338", to: "U21"}
2: {from: "U20", Id: "1927", to: "U21"}
3: {from: "U20", Id: "1730", to: "U21"}

I need to create a group for all the ids and post back the from and to fields.

{
    "from": "U20",
    "Ids": ["1922","9338","1927","1730"],
    "to:": "U21"
}

I have lodash as a helper library.

No, sorry forgot to say, those values will be the same for now — Tom Rudge
– Tom Rudge, Commented Feb 12, 2019 at 13:54

mbuechmann · Accepted Answer · 2019-02-12 15:45:26Z

3

To group based on 2 keys, you could do something like this using reduce. Create an accumulator object with a new key which is combination of from and to

const input = [
    { from: "U20", Id: "1922", to: "U21" },
    { from: "U20", Id: "9338", to: "U21" },
    { from: "U20", Id: "1927", to: "U21" },
    { from: "U20", Id: "1730", to: "U21" }
];

const merged = input.reduce((acc, { from, to, Id }) => {
    const key = `${from}-${to}`;
    acc[key] = acc[key] || { from, to, Ids:[] };
    acc[key]["Ids"].push(Id);
    return acc;
}, {})

const output = Object.values(merged);
console.log(output);

In your case, if you just want the first object, then output[0]

edited Feb 12, 2019 at 15:45

mbuechmann

5,8195 gold badges30 silver badges43 bronze badges

answered Feb 12, 2019 at 13:57

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadrian Hughes · Accepted Answer · 2019-02-12 14:01:22Z

1

If there's a possibility of there being different values in the from and to fields, then your API would need to change to accept an array of values instead of one string. However, working on the assumption that the from and to values will always be the same across each item in the array...

const payload = [
  {from: "U20", Id: "9338", to: "U21"},
  {from: "U20", Id: "1927", to: "U21"},
  {from: "U20", Id: "1730", to: "U21"},
];

const newValue = {
  from: payload[0].from,
  to: payload[0].to,
  Ids: payload.map(item => item.Id)
};

answered Feb 12, 2019 at 14:01

Hadrian Hughes

1031 silver badge10 bronze badges

Comments

dporechny · Accepted Answer · 2019-02-12 14:03:31Z

const a = [
  {from: "U20", Id: "1922", to: "U21"},
  {from: "U20", Id: "9338", to: "U21"},
  {from: "U20", Id: "1927", to: "U21"},
  {from: "U20", Id: "1730", to: "U21"},
  {from: "U21", Id: "1745", to: "U22"},
  {from: "U21", Id: "1755", to: "U22"},
]

const f = array => {
  const result = []
  // key-value storage
  const variations = {}
  array.forEach(item => {
    // set storage key
    const key = `${item.from}-${item.to}`;
    // check if key exists
    // if exists use it, if not - create empty array
    variations[key] = variations[key] || []
    // push item ids to storage
    variations[key].push(item.Id)
  })
  Object.keys(variations).map(variation => {
    // deconstruct storage key back to "from" and "to" values
    const [from, to] = variation.split('-');
    const obj = {};
    // write "from" and "to" values
    obj.from = from;
    obj.to = to;
    // add stored values
    obj.ids = variations[variation]
    // save
    result.push(obj)
  })
  console.log(result)
}

f(a)

NemoStein · Accepted Answer · 2019-02-12 14:06:44Z

1

With the following you can keep a record of every list of Ids for every from -> to key pair.

const entries = [
	{ from: 'U20', to: 'U21', Id: '1922' },
	{ from: 'U20', to: 'U21', Id: '9338' },
	{ from: 'U20', to: 'U21', Id: '1927' },
	{ from: 'U20', to: 'U21', Id: '1730' },
]

const output = entries.reduce((map, {from, to, Id}) =>
{
	if (!map[from])
	{
		map[from] = {}
	}
	
	if (!map[from][to])
	{
		map[from][to] = {from, to, Ids: []}
	}
	
	map[from][to].Ids.push(Id)
	
	return map
}, {})

console.log(output)

answered Feb 12, 2019 at 14:06

NemoStein

2,0982 gold badges23 silver badges36 bronze badges

Comments

brk · Accepted Answer · 2019-02-12 14:02:56Z

0

Use array reduce and in the accumulator pass an empty object. Use hasOwnProperty to check if the object has the property from and if its value matches, then in the id array push the value

let data = [{
    from: "U20",
    Id: "1922",
    to: "U21"
  },
  {
    from: "U20",
    Id: "9338",
    to: "U21"
  },
  {
    from: "U20",
    Id: "1927",
    to: "U21"
  },
  {
    from: "U20",
    Id: "1730",
    to: "U21"
  }
]


let newData = data.reduce(function(acc, curr) {
  if (acc.hasOwnProperty('from') && acc.from === curr.from) {
    acc.id.push(curr.Id)
  } else {
    acc = {
      from: curr.from,
      id: [curr.Id],
      to: curr.to
    }

  }
  return acc;
}, {});

console.log(newData)

answered Feb 12, 2019 at 14:02

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Amirado · Accepted Answer · 2019-02-12 14:17:14Z

0

Try this

var idArray = [];
var newObj = {};
 var objArray = [{
    "from": "U20",
    "Id": "1922",
    "to": "U21"
},
{
    "from": "U20",
    "Id": "9338",
    "to": "U21"
},
{
    "from": "U20",
    "Id": "1927",
    "to": "U21"
},
{
    "from": "U20",
    "Id": "1730",
    "to": "U21"
}
]

      for(var i=0; i<objArray.length; i++) {
    for(var key in objArray[i]) {
      if(key == 'Id') idArray.push(objArray[i][key])
    }
  }
  newObj.from = objArray[0].from;
  newObj.to = objArray[0].to;
  newObj.Id = idArray;
  console.log(JSON.stringify(newObj));

answered Feb 12, 2019 at 14:17

Amirado

1,0831 gold badge8 silver badges12 bronze badges

Comments

Nina Scholz · Accepted Answer · 2019-02-12 14:18:39Z

0

A slightly different approach by taking a Map and a joined key for the grouping with two values.

var data = [{ from: "U20", Id: "1922", to: "U21" }, { from: "U20", Id: "9338", to: "U21" }, { from: "U20", Id: "1927", to: "U21" }, { from: "U20", Id: "1730", to: "U21" }, { from: "U20", Id: "1730", to: "U22" }, { from: "U21", Id: "1730", to: "U22" }],
    result = Array.from(data
        .reduce(
             (m, { from, to, Id }) =>
                 (k => m.set(k, { from, to, Ids: [...(m.has(k) ? m.get(k).Ids : []), Id] }))
                 ([from, to].join('|')),
             new Map
        )
        .values()
    );

console.log(result);

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

answered Feb 12, 2019 at 14:18

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Sergei Ryzhov · Accepted Answer · 2019-02-12 16:07:10Z

0

And one more decision:

const compare = (o1, o2) => o1.from === o2.from && o1.to === o2.to
return entries
    .reduce((arr,entry) => !arr.find(a=>compare(a,entry)) ? arr.concat(entry) : arr, [])
    .map( ({from,to})=> ({
        from,
        to,
        ids: entries.filter(i=>compare(i,{from,to})).map(({id})=>id)
        }))

edited Feb 12, 2019 at 16:07

answered Feb 12, 2019 at 15:39

Sergei Ryzhov

518 bronze badges

Comments

Ori Drori · Accepted Answer · 2019-02-12 19:51:05Z

This is a solution that uses lodash/fp to group all objects in the array by the combination of the from and to props. Then it maps all groups back to array, by merge all objects in each group. If the merged props is Id, it concats the values to an array.

const { flow, groupBy, props, join, map, mergeAllWith, cond, nthArg, eq, concat } = _;

const fn = flow(
  groupBy(flow(                // group by joining from and to as the key
    props(['from', 'to']),
    join('-')
  )),
  map(mergeAllWith(cond([[     // merge all objects in each group
    flow(nthArg(2), eq('Id')), // if the prop name is Id, concat the values
    concat
  ]])))
);

const input = [
    { from: "U20", Id: "1922", to: "U21" },
    { from: "U20", Id: "9338", to: "U21" },
    { from: "U20", Id: "1927", to: "U21" },
    { from: "U20", Id: "1730", to: "U21" }
];

const result = fn(input);

console.log(result);

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

Fawad Mukhtar · Accepted Answer · 2019-02-13 06:40:58Z

0

It's simple. You can do this

const arr = [
     {from: "U20", Id: "1922", to: "U21"},
     {from: "U20", Id: "9338", to: "U21"},
     {from: "U20", Id: "1927", to: "U21"},
     {from: "U20", Id: "1730", to: "U21"}]

const newObject = {
    from: arr[0].from,
    Ids: arr.map(record => (record.Id)),
    to: arr[0].to
    }

answered Feb 13, 2019 at 6:40

Fawad Mukhtar

9206 silver badges10 bronze badges

Collectives™ on Stack Overflow

Transform object array to new array structure

10 Answers 10

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related