How to dynamically extract data from vue object for a POST request to backend?

Question

I have a vue object with all these getters and setters, here is a screenshot from the console.log:

The structure of the actual DATA (the not-vue stuff) looks like this:

       {
          Internal_key: "TESTKEY_1",
          extensiontable_itc: {
            description_itc: "EXTENSION_ITC_1_1",
            description_itc2: "EXTENSION_ITC_1_2",
          },
          extensiontable_sysops: {
            description_sysops: "EXTENSION_SYSOPS_1"
          }
        }

The data might look different in other usecases. There might be more or less key-value pairs on the outer object, and the keys might be named differently as well. Same goes for the nested objects and their contents.

Is there some convenient way to extract this data into a plain JS Object? If not, how can I best loop the vue object to extract the data "manually"? The AJAX request shall be performed by an axios request, if this is important as well.

EDIT: Here is the relevant data in vue:

data() {
  return {
    editingRecord: {
        original: null,
        copy: null
      }
  }
}

During my programflow, both editingRecord.orginal and editingRecord.copy receive data from an inputform. copy sets its data to original if the user clicks the save/send button. Then, I want to take the data from editingRecord.original with both its keys and values and send them to the server via AJAX request.

There's no clear link on the data in your VueJS and the data you want to send to the server. How do you want to transform the data? It's not clear in your question at all. — Terry
– Terry, Commented Mar 19, 2020 at 10:17
You didn't show any data in your VueJS app: so how are we going to know how you want to transform the data to the shape you want in the POST request? — Terry
– Terry, Commented Mar 19, 2020 at 10:21
What happens if you make a post request with this.editingRecord.original as the body? — ellisdod
– ellisdod, Commented Mar 19, 2020 at 11:33

ellisdod · Accepted Answer · 2020-03-19 12:02:24Z

0

Its best not to mix jQuery with Vue so here's how you would do it using Axios https://github.com/axios/axios

methods: {
    submit() {
      const body = this.editingRecord.original

      // make changes to body

      axios.post( "backend_url", body )
      .then(function(resp){
        console.log(resp)
      });

    }
  }

answered Mar 19, 2020 at 12:02

ellisdod

1,74411 silver badges12 bronze badges

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

Comments

Narktor · Accepted Answer · 2020-03-19 12:53:08Z

0

Okay, I found the solution.

  let vueObject = Object.entries(this.editingRecord.original)

  for(const[key, value] of vueObject){
    if(typeof value == 'object' && value !== null){
      for(const [nestedKey, nestedValue] of Object.entries(value)){
        result[nestedKey] = nestedValue
      }
    }else{
      result[key] = value
    }
  }
  console.log("resultObject is", result)

This way you can iterate over all properties including the properties of nested objects and reassign both key and value to a fresh, one-dimensional array.

answered Mar 19, 2020 at 12:53

Narktor

1,0371 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to dynamically extract data from vue object for a POST request to backend?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related