Merge object with Vuejs and Axios

Question

I have two objects obtained from an axios.get and a fetch from an rss feed and the result is something like that: Two Object

Objects have fields with different names but with the same meaning. For example: Title and Full_name refer to the name of the object.

Currently i have this configuration:

Obj1 = {title: "Main text 1", body: "text text 1"},
       {title: "Main text 2", body: "text text 2"};
Obj2 = {full_name: "Main Text 3", description: "text text 3"};

I would like to get an object like this:

Obj3= {name: "Main text 1", desc: "text text 1"},
      {name: "Main text 2", desc: "text text 2"};
      {name: "Main Text 3", desc: "text text 3"};

Currently I am using this code:

<script>
    export default {
        data() {
            return {
                obj1: {},
                obj2: {} 
            }
        },
        mounted() {
            this.axios
                .get('https://url.com')
                .then((response) => {
                    this.obj1 = response.data;
                  });
            fetch('https://url2.com')
                .then((res) => res.json())
                .then((response) => {
                    this.obj2 = response.items; 
                });
        } 
    }
</script>

I tried these solutions has the result is always empty:

let merged = {...this.obj1, ...this.obj2};

var merged = Object.assign( {}, this.obj1, this.obj2);

in where you are executing let merged = { ... ? Make sure you are executing this after getting the api response — Sajib Khan
– Sajib Khan, Commented Mar 5, 2019 at 12:04
In a function contained in "methods" that is executed by "created". — Francesco Mansi
– Francesco Mansi, Commented Mar 5, 2019 at 12:40
so, the problem is your code var merged = Object.assign( {}, this.obj1, this.obj2); is executing before updating obj1 or obj2 by API response. Added an answer using watchers — Sajib Khan
– Sajib Khan, Commented Mar 5, 2019 at 14:18

Sovalina · Accepted Answer · 2019-03-05 13:05:40Z

4

According to your screenshot, this.obj1 and this.obj2 are Arrays

So you can merge them with the spread operator by using brackets to create a new array:

let merged = [...this.obj1, ...this.obj2]

answered Mar 5, 2019 at 13:05

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 05:50:19Z

The problem is your code var merged = Object.assign( {}, this.obj1, this.obj2); is executing before updating obj1 or obj2 by API response.

You can watch obj1 & obj2. Update the merged object when any of obj1 or obj2 is changed.

<template>
  <div>Merged Object: {{ merged }}</div>
</template>

<script>
export default {
  data() {
    return {
      obj1: {},
      obj2: {},
        merged: {}
      }
    },
  mounted() {
    this.axios
      .get('https://url.com')
      .then((response) => {
        this.obj1 = response.data;
      });
      fetch('https://url2.com')
        .then((res) => res.json())
        .then((response) => {
          this.obj2 = response.items; 
        });
  },
  watch: { 
    // whenever obj1 changes, this function will run
    obj1(newVal, oldVal) {
      this.merged = Object.assign( {}, newVal, this.obj2);
    },

    // whenever obj2 changes, this function will run
    obj2(newVal, oldVal) {
      this.merged = Object.assign( {}, newVal, this.obj1);
    }

  }
}
</script>

Mohsin Jillani · Accepted Answer · 2019-03-05 12:04:22Z

0

Create a new Array Name as

var newArray[]
var Obj1 = {title: "Main text 1", body: "text text 1"},
           {title: "Main text 2", body: "text text 2"};
var Obj2 = {full_name: "Main Text 3", description: "text text 3"};`enter newArray.Push(Obj1);
newArray.Push(Obj2);

answered Mar 5, 2019 at 12:04

Mohsin Jillani

815 bronze badges

Comments

Radu Diță · Accepted Answer · 2019-03-05 12:46:41Z

0

You should map the second response and then concat to the first one.

var concObject = obj1.concat( obj2.map( item => ({name: item.full_name, desc: item.description}) ) )

NB: From your example obj1 and obj2 are arrays.

answered Mar 5, 2019 at 12:46

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

Merge object with Vuejs and Axios

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related