How to merge a object to a array object in vuejs

Question

I have a api response.data

[{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}]

And my component .vue

...
    created() {
       const request = axios.get("***api_url***").then(response => {
          const result = response.data;
          const placeholder = { 'id': 0, 'name': '[Select]' };
          const newObject = result.concat( placeholder.map( item => ({id: item.id, name: item.name}) ) );
          console.log(newObject);
      });
   }

I want merge placeholder object to result after api response

result.unshift(placeholder)

kemicofa
– kemicofa

2022-07-22 14:41:36 +00:00
Commented Jul 22, 2022 at 14:41 — kemicofa
– kemicofa, Commented Jul 22, 2022 at 14:41

chriopp · Accepted Answer · 2022-07-22 15:03:50Z

3

Result is actually a list. You can use the destructuring assignment

  const result = [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}];
  const placeholder = {id:0, name: "[Select]"};

  const newObject = [ placeholder, ...result ];

to prepend the placeholder.

To use concat you must wrap the placeholder in a list.

[placeholder].concat(result)

to achieve the same result in a "more conservative way".

Or you can use the Object.unshift as suggested by @kemicofa ghost.

result.unshift(placeholder)

edited Jul 22, 2022 at 15:03

answered Jul 22, 2022 at 14:50

chriopp

9577 silver badges14 bronze badges

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

Comments

Albert · Accepted Answer · 2022-07-22 14:46:13Z

0

Obviously, Vue is a JavaScript's progressive framework so we can use the same functions of JavaScript here to merge the objects in Vue.

Please use the following feature on your code!

Object.assign(target, Obj1, Obj2, ...);

Albert

answered Jul 22, 2022 at 14:46

Albert

224 bronze badges

Collectives™ on Stack Overflow

How to merge a object to a array object in vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related