What is the best way to extract data dynamically from a Vue object in order to make a POST request to the

Question

What is the best way to extract data dynamically from a Vue object in order to make a POST request to the

My Vue object is filled with various getters and setters. Below is a console.log screenshot for reference:

https://i.sstatic.net/dyPvO.jpg

The structure of the raw data (non-Vue related) appears as follows:

       {
          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"
          }
        }

In different scenarios, the data might have varying key-value pairs within the outer object and may also differ in naming conventions for both keys and nested objects.

Is there an effective method to extract this data into a standard JS Object? If not, what would be the best approach to iterate through the Vue object for manual extraction? The AJAX request will be carried out using Axios, if that detail is relevant.

EDIT: Below is the pertinent Vue data:

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

Throughout my program flow, data is inputted into both editingRecord.original and editingRecord.copy from a form. When the user clicks save/send, the data from editingRecord.original, including all keys and values, should be sent to the server via an AJAX request.

javascript vue.js axios

Answer 1

Answer №1

Avoid mixing jQuery with Vue for better compatibility. Instead, use Axios for handling requests. Visit https://github.com/axios/axios for more information.

methods: {
    sendData() {
      const data = this.updatedRecord.original

      // modify the data as needed

      axios.post( "your_backend_url", data )
      .then(function(response){
        console.log(response)
      });

    }
  }

Answer 2

Avoid mixing jQuery with Vue for better compatibility. Instead, use Axios for handling requests. Visit https://github.com/axios/axios for more information.

methods: {
    sendData() {
      const data = this.updatedRecord.original

      // modify the data as needed

      axios.post( "your_backend_url", data )
      .then(function(response){
        console.log(response)
      });

    }
  }

Answer 3

Answer №2

After some investigation, I have managed to find the solution to the problem at hand.

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

for(const[key, value] of obj){
  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)

By utilizing this method, it becomes possible to iterate through all properties, even those within nested objects, and subsequently reassign both key and value into a new one-dimensional array.

Answer 4

After some investigation, I have managed to find the solution to the problem at hand.

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

for(const[key, value] of obj){
  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)

By utilizing this method, it becomes possible to iterate through all properties, even those within nested objects, and subsequently reassign both key and value into a new one-dimensional array.

What is the best way to extract data dynamically from a Vue object in order to make a POST request to the

Answer №1

Answer №2

Similar questions

The onLayoutChange function keeps overwriting the data stored in my local storage

When the class name is identical, the click event appears to be malfunctioning

Using Laravel to transfer multiple data to Vue

Is there a way to combine all the text on an HTML page into one continuous string without losing the CSS styling?

Assign a class to the following element using an Angular 2 Directive

Guide on how to dynamically generate a dropdown menu based on the selection made in another dropdown

execute task to optimize CSS encoding in the build process

execute javascript code after loading ajax content

Leveraging Iframes for efficient user authentication within an Angular application

Combining v-for with emitted values for optimal functionality

How can I append an object key to the end of a URL link within an anchor tag

Arranging titles on the top of the page in a column format, resembling an index

Tips for avoiding accidentally selecting nearby text while holding down a button on your mobile device

Bug in Click Behavior of HTML5 Canvas on Webkit Browser Versions Below 535 for Android Native and iOS5 Safari

When implementing variables from input boxes, my SQL query fails to populate any data in the database table

tips for adjusting padding in bootstrap-vue select component

Converting the source to your image assets in Angular: A step-by-step guide

Using Modal Functions in AngularJS Controller

Creating a list using variables through a Post Request in Express

Using React Router useHistory to navigate to different routes programmatically