1

So I have an array of objects called mergeItems that has a value of what you see below

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
city: [Array(13)]
miles: [Array(13)]
phone: [Array(13)]
photos: [Array(13)]
prices: [Array(13)]
state: [Array(13)]
titles: [Array(13)]
urls: [Array(13)]
who: [Array(13)]
__proto__: Object
1: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
2: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
3: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
4: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
5: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
6: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
7:
city: [Array(0)]
miles: [Array(0)]
phone: [Array(0)]
photos: [Array(0)]
prices: [Array(0)]
state: [Array(0)]
titles: [Array(0)]
urls: [Array(0)]
who: [Array(0)]
__proto__: Object
length: 8
__proto__: Array(0)

It has objects inside the array and then each object has the same keys inside of them. I am trying to merge all 7 arrays together, and then also merge all the city, miles, etc keys and the arrays inside of them.

I tried doing


let newData = mergeItems.join();
setState({mainItems: newData});

but since that only seems to merge the arrays that does me no good. Was wondering if anyone could point me in the right direction on how this could be handled. Thanks so much =]

My current value of mergeItems is:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
1: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
2: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
3: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
4: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
5: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
6: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
7: {urls: Array(1), titles: Array(1), miles: Array(1), prices: Array(1), photos: Array(1), …}
length: 8
__proto__: Array(0)

My desired output would look like this

{urls: Array(7), titles: Array(7), miles: Array(7), prices: Array(7), photos: Array(7), …}
city: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
miles: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
phone: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
photos: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
prices: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
state: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
titles: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
urls: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
who: (7) [Array(120), Array(0), Array(18), Array(57), Array(1), Array(0), Array(13)]
__proto__: Object
Improve this question
3
  • Can you post the desired output and a sample input? Commented Aug 1, 2020 at 5:32
  • Added my desired output and the input is the value I posted before. Commented Aug 1, 2020 at 5:34
  • Added another one thats is easier on the eyes lol Commented Aug 1, 2020 at 5:39

2 Answers 2

Reset to default
2

It looks like you want to end up with an object whose values are arrays of arrays (instead of one combined array for each key). In that case, you can use this:

const mergeItems = [
    { urls: [1, 2, 3], titles: ['a', 'b', 'c'] },
    { urls: [4, 5, 6], titles: ['d', 'e', 'f'] }
];

let newData = {};
Object.keys(mergeItems[0]).forEach(key => {
    newData[key] = mergeItems.map(item => item[key])
});
console.log(newData);

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

8 Comments

So when I use this I get the output almost correct but the arrays inside the objects do not have the right amount of values
{urls: Array(7), titles: Array(7), miles: Array(7), prices: Array(7), photos: Array(7), …} city: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] miles: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] phone: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] photos: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] prices: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)]
state: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] titles: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] urls: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] who: (7) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1)] proto: Object
for example there, as you can see, all the arrays are at 1 instead of 120 like they should be
Thanks so much man I know this was a tricky question. I really do appreciate your time this is going to make a huge difference in the way I was handling this part of my project.
|
2

If I understand correctly, fundamentally you have:

const input = [{ foo: 1, bar: 2}, {foo: 3, bar: 4}]

and you want:

{ foo: [1, 3], bar: [2, 4] }

In other words, you want to take an array of things (objects in this case), and reduce it down to a single value (an object containing arrays of the other objects' values). As it turns out, Javascript has a method for doing exactly that, and I used that specific verb for a reason ...

const output = input.reduce((objectWithMergedProperties, currentObject) => {
  objectWithMergedProperties.foo.push(currentObject.foo);
  objectWithMergedProperties.bar.push(currentObject.bar);

  return objectWithMergedProperties;
}, { foo: [], bar: [] });

This works because reduce iterates through your array, starting with an initial objectWithMergedProperties of { foo: [], bar: [] } ... but then with each iteration it changes it to whatever gets returned inside the callback.

This lets you add the values of each iteration's object to the output object you want to build, and then return that object from inside the callback. After all the iterating is done that object will finally be returned from the entire reduce call.

Of course, your example wasn't with objects that have foo and bar properties, but hopefully this demonstrates how you can use reduce to reduce any array with any values into a single object.

And of course if you had a lot of properties you could always do some more iteration (through your object's keys) instead of hard-coding them:

  objectWithMergedProperties.foo.push(currentObject.foo);
  objectWithMergedProperties.bar.push(currentObject.bar);

could become:

  Object.keys(objectWithMergedProperties)
    .forEach(key => objectWithMergedProperties[key].push(currentObject[key]);
Improve this answer

3 Comments

Testing this now =D
Hmm this gave me the same problem as the other answer, the arrays inside the objects are not merging.
Got it solved, but I greatly appreciate your time none the less and I learned something from this code you supplied so thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.