Append object values javascript

Question

How can I append the customerApplicationAddress values no, street, barangay, municipality, province and put it inside the customerApplication.address

data(){
    return {
        customerApplicationAddress: {
          no: '',
          street: '',
          barangay: '',
          municipality: '',
          province: '',
        },
        customerApplication:{
          name: null,
          address: null
        }
    }
}

Any idea how can I achieve this? I tried looping and concatenate it but somehow I'm getting an undefined error.

Answer 1

Consider using computed properties for customApplication . Your code would look like:

Vue.extend({
  data() {
    return {
      customerApplicationAddress: {
        no: '',
        street: '',
        barangay: '',
        municipality: '',
        province: '',
      },
      customerApplication:{
        name: null,
        address: null
      }
    };
  },

  computed: {
    customerApplication() {

      const addr = this.customerApplicationAddress;

      return {
        // Or consider using string interpolation
        address: addr.no + ' ' + addr.street + ' ' + addr.barangay + ' ' + addr.municipality + ' ' + addr.province
      };
    }
  }
});

By doing this, your customerApplication object would be automatically updated every time underlying customerApplicationAddress.* value changes.

Answer 2

It looks like you are trying to turn an object into an array of key value pairs & then into a string.

You can do this by using Object.keys and then Array.prototype.map .

 const data = { customerApplicationAddress: { no: '1', street: 'Big Street', barangay: 'some barangay', municipality: 'some municipality', province: 'some province', }, customerApplication:{ name: null, address: null } } data.customerApplication.address = Object.keys(data.customerApplicationAddress).map(k => data.customerApplicationAddress[k]).join(", ") console.log(data)