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?

Answer 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
  }
})

Answer 2

you can loop on the object and add your properties:

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

Answer 3

Use .map with object spread syntax.

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

Answer 4

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);

Answer 5

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}))
}

Answer 6

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,
    }));
  },
};

Answer 7

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);
        }
      }
    }