Looping array of object into array of object javascript

Question

so i have two arrays of object like this:

var lab =[
  { label: '1', value: 42 },
  { label: '2', value: 55 },
  { label: '3', value: 51 },
  { label: '4', value: 22 } 
  ];
  
  
var val = [ { label: '1', value: 42 },
  { label: '2', value: 55 },
   ];

lab.forEach(labs=>{
    val.forEach(vals=>{
        labs["columns"]=vals.value
    })
})
console.log(lab)

i try to get the value like this

[ { label: '1', value: 42, columns: {42,55} },
  { label: '2', value: 55, columns:{42,55} },
  { label: '3', value: 51, columns: {42,55} },
  { label: '4', value: 22, columns: {42,55} } ]

but after i ran the code i get the value that i am not wanted like this:

[ { label: '1', value: 42, columns: 55 },
  { label: '2', value: 55, columns: 55 },
  { label: '3', value: 51, columns: 55 },
  { label: '4', value: 22, columns: 55 } ]

where do i did wrong actually on the loop..

It is very strange that both objects have label property, and that you have labels '1' and '2' only inside val, while lab has 4 labels. It is not clear why columns is {42, 55} (and it should be incorrect syntax for an object actually, it needs : instead of ,) for every label. Furthermore label and value are identical for the first two indexes inside lab and val. — link2name
– link2name, Commented Oct 24, 2022 at 7:37

Peter Seliger · Accepted Answer · 2022-10-24 10:04:09Z

3

Does this do what you want?

const lab = [
  { label: '1', value: 42 },
  { label: '2', value: 55 },
  { label: '3', value: 51 },
  { label: '4', value: 22 },
];
const val = [
  { label: '1', value: 42 },
  { label: '2', value: 55 },
];

// we get an array of stuff that the OP wants to add,
// as apparently it is identical for each object.
const columns = val.map(obj => obj.value);

const a = lab.map(labs => {
  return {
    // shallow copys for every item.
    ...labs,
    columns: [...columns],
  };
});

console.log({ a });

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

map array method takes a function returns a new array where each element was updated by calling that function with element as it's argument.

This answer uses two calls of map, same amount as your answer, however in your answer map calls are nested, so the inner map would be called for each element, while it's result will be always the same, in my answer we call it once.

edited Oct 24, 2022 at 10:04

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

answered Oct 24, 2022 at 7:38

link2name

1217 bronze badges

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

1 Comment

Peter Seliger Over a year ago

Please provide some text which explains the approach and describes / mentions / refers the used techniques like mapping and destructuring assignment.

JS24 · Accepted Answer · 2022-10-24 07:06:24Z

0

i have figured it out by using map function

var lab =[
  { label: '1', value: 42 },
  { label: '2', value: 55 },
  { label: '3', value: 51 },
  { label: '4', value: 22 } 
  ];




var val = [ { label: '1', value: 10 },
  { label: '2', value: 55 },
   ];

const a = lab.map((labs)=>{
    let ab={
        label:labs.label,
        value:labs.value,
        columns:val.map((vals)=>{
        return vals.value
    })
    }
    return ab
    
})
console.log(a)

hope it will help

answered Oct 24, 2022 at 7:06

JS24

4685 silver badges26 bronze badges

Collectives™ on Stack Overflow

Looping array of object into array of object javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related