Getting [object, object] after i merged an array

JavaScript
1

Hi there, my code below after being merged, logs ["[object object]", "[object object]"] in the console.

let array1 = [
  { alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 },
  { alpha: 1, rgb: [124, 239, 203], type: 'tint', weight: 100 },
];

let array2 = [
  { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 },
  { alpha: 1, rgb: [238, 138, 158], type: 'tint', weight: 100 },
];

const mergeArr = () => {
  let colors = [];
  for (let i = 0; i < array1.length; i++) {
    colors[i] = array1[i] + ' ' + array2[i];
  }
  console.log(colors);
};
mergeArr();

I tried console.log(object.alpha) I got undefined… I used JSON.strigify(), still undefined

My intentions is to extract the values inside the object ut it’s proving difficult

2

What does this line mean?

colors[i] = array1[i] + ' ' + array2[i];

The elements of those arrays are objects. Concatenating those with a string is telling JS to coerce those to strings, which comes our as [object Object].

I’m not sure what you are trying to accomplish. Merge can mean different things. What do you expect the result to look like?

3

I mean, if you are just trying to combine those two into one big array, you can do something like:

const colors = array1.concat(array2);

or

const colors = [...array1, ...array2];

But again, it depends on what you mean by “merge” - they can sometimes have “rules” that govern how they merge.

4

@kevinSmith , thanks for your input… I’m a newbie trying to learn JavaScript & React by doing project.

I’m trying to build a gradient color generator… User inputs color in two different text field to generate shades of gradient from the colors (I am using value.js).

So each color is generating arrays of different shades, just like what is up there.

So I think merging the arrays like this

let arr1 = ['a', 'b', 'c', 'd']

    let arr2 = ['e', 'f', 'g', 'h']

    let res = ['a e', 'b f', 'c g', 'd h']

Would make it more achievable hence the line of code:

colors[i] = array1[i] + ' ' + array2[i]

5

OK, but 'a e' translates as:

{ alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 } + ' ' + { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 }

You can’t combine objects that way. You can convert them to strings, but then they don’t have properties anymore, just substrings.

What type do you want that to be? A string or an object?

Show us with the sample data that you have, what you want the final result to be:

const colors = [
  // fill this in
];
6

I mean, further more, if they could have properties, what would it mean? You’re combining two objects with the same properties. Will the new object have two “alpha” properties, two “rgb” properties, etc.? Objects must have unique property names.

7

Sorry this may sound dumb but maybe an array of objects, something like this

const colors = [
0: [{ alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 } ,  { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 }],
1:  [{ alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 } ,  { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 }],
2:  [{ alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 } ,  { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 }],
]

I then maybe map over the arrays and the get the properties.

8

My logic maybe be flawed but this the way I think about:

1.) Combine the two arrays together so that i will get two rgbs and then use the background gradient property.

I don’t know if programming doesn’t work this way

9

There’s nothing wrong with an array of objects. But that isn’t what you are showing there. What you have there is an object of arrays of objects. Or perhaps an “array like object” of arrays of objects.

I don’t understand how you ended up with three key/value pairs on the final. I don’t understand why some of the data was excluded.

10

Perhaps this is what you want?

const mergeArr = () => {
  let colors = [];
  for (let i = 0; i < array1.length; i++) {
    colors[i] = [array1[i],  array2[i]];
  }
  console.log(colors)
  // [
  //   [{ alpha: 1, rgb: [69, 22, 113], type: 'tint', weight: 100 }, { alpha: 1, rgb: [132, 12, 36], type: 'tint', weight: 100 }],
  //   [{ alpha: 1, rgb: [124, 239, 203], type: 'tint', weight: 100 }, { alpha: 1, rgb: [238, 138, 158], type: 'tint', weight: 100 }],
  // ]
};
11

Yes, something like this. If you don’t mind, can i drop the repository link so that you can the data yourself… Maybe I’m just not clear enough typing this out

12

Sure. I’m going to lunch right now but I can look when I get back or maybe someone else with chime in.

13

Here is the link https://github.com/FesoQue/gradeo-gradient-generator/blob/main/src/App.js

14

That doesn’t really help me. What I need is an example of the input data and what you want the output data to be. That is, assuming that what I showed earlier isn’t sufficient.

15

Kindly have a look at the repo again… I have been able to render the gradient colors.

One question, when I clicked on generate button I couldn’t get any values, hence new colors can’t be generated… Even when handeColors() (this handle the merged array) is invoked in the handleSubmit function

Is it because I also invokedhandColors() in the useEffect. I did that to prevent infinite looks

16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.