How to add new properties into every object of an array

Question

How can I add new 2 properties inside the array of objects? Those 2 properties should be added for every object inside the array. Here is the function:

selectTag(selectedProduct, selectedTag) {
      this.selectedProducts.filter(item => {
        item.id === selectedProduct.id
      })
      .map(item => {
        item.tagId=selectedTag.id, item.tagTitle = selectedTag.title
        })
    },

dropdown

  <b-dropdown aria-role="list">
                <b-button
                  icon-right="caret-down"
                  class="ToolbarButton"
                  size="is-small"
                >
                  <span> {{ selectedProduct.tagTitle }} </span>
                </b-button>

                <b-dropdownitem
                  v-for="selectedTag in selectedProduct.tags"
                  :key="selectedTag.id"
                  aria-role="listitem"
                  @click="selectTag(selectedProduct, selectedTag)"
                >
                  {{ selectedTag.title }}
                </b-dropdownItem>

I tried above function but it didn't work. map method should be fixed. I am trying to add tagId and tagTitle properties which will get value from drop down selection for every product row... How can be it fixed?

see this post https://stackoverflow.com/questions/38922998/add-property-to-an-array-of-objects — Umair Mubeen, Jul 26 '20 at 17:23

score 1 · Answer 1 · answered Jul 26 '20 at 17:22

1

The map function indeed is wrong, you don't return anything, it should be like this:

.map(item => ({
     ...item,
     tagId: selectedTag.id,
     tagTitle: selectedTag.title
}))

or

.map(item => {
  return {
    ...item,
    tagId: selectedTag.id,
    tagTitle: selectedTag.title
  }
})

answered Jul 26 '20 at 17:22

Evgeny Klimenchenko

1,184
1
6
15

this will only return an array with these two properties, will have to add `...item` as well inside this object to return the full object – Jason McFarlane Jul 26 '20 at 17:23
Yeah, totally forgot about it – Evgeny Klimenchenko Jul 26 '20 at 17:24
Yea nice, you updated it like a second after I wrote the comment haha – Jason McFarlane Jul 26 '20 at 17:24
The goal is to mutate selectedProducts. Won't this code create a new array, but leave selectedProducts unchanged? – crosen9999 Jul 27 '20 at 06:59

score 1 · Answer 2 · answered Jul 26 '20 at 17:38

1

you can loop on the object and add your properties:

for(let obj of array) {
    obj[key1] = value1;
    obj[key2] = value2;
}

answered Jul 26 '20 at 17:38

rayleigh

21
2

Unmitigated · Answer 3 · 2020-07-26T17:48:25.347

0

Use .map with object spread syntax.

.map(item => ({
    ...item, 
    item.tagId: selectedTag.id, item.tagTitle: selectedTag.title
}))

edited Jul 26 '20 at 17:48

answered Jul 26 '20 at 17:23

Unmitigated

76,500
11
62
80

score 0 · Answer 4 · answered Jul 26 '20 at 17:25

Try this

var arr =[
{id: 1, turnName: "10_00_am"},
{id: 2, turnName: "10_00_am"},
{id: 3, turnName: "11_00_am"}
];


const addProps = (x) => {
    x.prop1 = 'Alaska';
    x.prop2 = 'Canada';
    return x;
}

var newArr = arr.map(x => addProps(x));
console.log(newArr);

brijesh-pant · Answer 5 · 2020-07-26T18:37:12.780

0

You can use ES6 object spread syntax to return a new updated item from map function. Also, the object properties can be destructured in the function parameters itself to make it look concise and neat.

selectTag(({id}), ({id: tagId, title: tagTitle})) {
    this.selectedProducts.filter(item => item.id === id)
    .map(item => ({...item, tagId, tagTitle}))
}

edited Jul 26 '20 at 18:37

answered Jul 26 '20 at 17:25

brijesh-pant

967
1
8
16

1

Please add an expansion to your answer for long term value, and for future visitors to learn from. Code only answers are less likely to be upvotes as they are not get helpful or user friendly. – SherylHohman Jul 26 '20 at 18:07

score 0 · Answer 6 · answered Jul 26 '20 at 17:30

From the function you show, point out that the filter needs to store its result in some variable, since filter does not mutate the array in which it is executed. mapping doesn't work because you have to copy the object and then extend the new properties

If I understood your question correctly, please try the following example

const object = {
  selectTag(selectedProduct, selectedTag) {
    const data = this.selectedProducts.filter((item) => {
      item.id === selectedProduct.id;
    });

    return data.map((entry) => ({
      ...entry,
      tagId: selectedTag.id,
      tagTitle: selectedTag.title,
    }));
  },
};

crosen9999 · Accepted Answer · 2020-07-26T19:13:43.783

0

If this is in Vue.js, you cannot add properties to an object conventionally, as it will not be reactive. You need to use Vue.set:

    selectTag: function(selectedProduct, selectedTag) {
      for (var i = 0; i < this.selectedProducts.length; i++) {
        if (this.selectedProducts[i].id === selectedProduct.id) {
          this.$set(this.selectedProducts[i], "tagId", selectedTag.id);
          this.$set(this.selectedProducts[i], "tagTitle", selectedTag.title);
        }
      }
    }

edited Jul 26 '20 at 19:13

answered Jul 26 '20 at 17:57

crosen9999

823
7
13

Can you please edit your answer based on the whole my question code? I am doing id check first for selectedProduct then after that add value – Jul 26 '20 at 18:01
It says vue is not defined and tagId is not defined, tagTitle is not defined – Jul 26 '20 at 18:09
I missed a quote. Please try now. Also, please see here: https://vuejs.org/v2/guide/reactivity.html – crosen9999 Jul 26 '20 at 18:15
If I understand the issue properly, I believe this should work now. The assumption is that selectedProducts is defined in the component with the selectTag method. – crosen9999 Jul 26 '20 at 18:28
've updated my question with the drop down part where it's getting used. And it's still not working. Can you please check the dropdown part in the question for better understanding the issue? Filter part works fine console log shows the right ids but second part is not working inside for each – Jul 26 '20 at 18:33
I know this is ugly, but it worked in my mockup. Please see if you have any success with it. – crosen9999 Jul 26 '20 at 18:59
It seems fixed. Thank you so much. – Jul 26 '20 at 19:34
Can you please help with this question as well it's missing case for the same drop down? Here is the link. https://stackoverflow.com/questions/63119797/how-to-check-if-there-is-no-selected-value-then-select-first-item – Jul 27 '20 at 16:48

How to add new properties into every object of an array

7 Answers7