Mapping Data with Ajax in VueJs

Question

Mapping Data with Ajax in VueJs

When a Vue page is loaded, I make an Ajax call in the mounted() event to retrieve data. In order to reconstruct the existing Pager object with all its required parameters, I create a new Pager instance each time.

If I don't do this, vm.Pager remains just an Object without necessary methods, causing it to fail the prop type check that is passed to it.

axios.post("/Home/GetList", vm.Pager)
.then(function (result)
{
    var p = result.data.Pager;
    vm.Pager = new Pager(p.PageSize, p.CurrentRecord, p.TotalCount);
    //more operations on Pager fields
    vm.ItemList = result.data.ListItems;        
})
.catch(function (error)
{
    alert(error); 
});

In knockoutjs, there was a useful mapping function where you could specify the types to map without re-creating the object. This was especially handy for complex or nested Ajax data.

Is there a more efficient way to achieve this in Vue (or javascript) so that the type mapping from Ajax data can be done without the need to reconstruct the object?

javascript ajax vue.js

Answer 1

Answer №1

One option is to create your own mapping function.

methods: {
  mapDataToProps (responseData, map) {
     responseData.forEach((item, key) => {
       let mapperVal = map[key]
       if (typeof mapperVal === 'string') {
         this.$set(this, map[key], item)
       } else if (typeof mapperVal === 'function') {
         this.$set(this, key, map[key](item))
       }
     })
  }
}

Then, in your AJAX request:

axios.post("/Home/GetList", vm.Pager)
.then(function (result)
{
this.mapDataToProps(result.data, {
ItemList: 'ListItems',
Pager: (p) => new Pager(p.PageSize, p.CurrentRecord, p.TotalCount)
})      
})

Answer 2

One option is to create your own mapping function.

methods: {
  mapDataToProps (responseData, map) {
     responseData.forEach((item, key) => {
       let mapperVal = map[key]
       if (typeof mapperVal === 'string') {
         this.$set(this, map[key], item)
       } else if (typeof mapperVal === 'function') {
         this.$set(this, key, map[key](item))
       }
     })
  }
}

Then, in your AJAX request:

axios.post("/Home/GetList", vm.Pager)
.then(function (result)
{
this.mapDataToProps(result.data, {
ItemList: 'ListItems',
Pager: (p) => new Pager(p.PageSize, p.CurrentRecord, p.TotalCount)
})      
})

Answer 3

Answer №2

In my exploration, I have discovered two methods to update the viewmodel effectively:

Object.assign(vm.Pager, result.data.Pager);

Alternatively,

// import _ from 'lodash'
_.merge(vm.Pager, result.data.Pager);

Despite their effectiveness, these methods do not trigger the watch method in the nested ListPager control that receives the Pager object.

To address this issue, I found a solution after referencing the documentation on reactivity in Vue.js VueJs: Reactivity in Depth - Change Detection Caveats.

vm.Pager = Object.assign(new Pager(), vm.Pager, result.data.Pager);

This approach involves creating a new Pager object while maintaining Vue reactivity, offering scalability for more complex solutions in the future.

Answer 4

In my exploration, I have discovered two methods to update the viewmodel effectively:

Object.assign(vm.Pager, result.data.Pager);

Alternatively,

// import _ from 'lodash'
_.merge(vm.Pager, result.data.Pager);

Despite their effectiveness, these methods do not trigger the watch method in the nested ListPager control that receives the Pager object.

To address this issue, I found a solution after referencing the documentation on reactivity in Vue.js VueJs: Reactivity in Depth - Change Detection Caveats.

vm.Pager = Object.assign(new Pager(), vm.Pager, result.data.Pager);

This approach involves creating a new Pager object while maintaining Vue reactivity, offering scalability for more complex solutions in the future.

Mapping Data with Ajax in VueJs

Answer №1

Answer №2

Similar questions

Using React and Material-UI to dynamically populate a table with data retrieved from

The Jquery Post Method functions smoothly on a local environment, however encounters issues when deployed on a

Steps for obtaining a CSV or PDF file as the response to an AJAX request

The use of the jQuery clone() method in conjunction with jQuery TABS allows for the display of cloned fields

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

Is there a way to dynamically add an option to multiple select boxes and then only redirect the browser if that specific option is chosen using jquery/js?

What is the correct way to utilize jquery's getJSON function?

Using MSAL for secure authentication and authorization in React.js

Encountering the error "Uncaught reference error: $ is not defined" despite ensuring that scripts are loading in the correct order. However, the scripts work from the

Retrieving specific rows from an array in AngularJS based on certain conditions

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

Adding a function as a parameter in TypeScript while utilizing prop destructuring in a React function component

Extend GridView cell for file preview and download

The use of Next.js v12 middleware is incompatible with both node-fetch and axios

What is the process for accessing the contents of various versions of an S3 object?

unable to see the follow button in the website's Vue component

Comparing Fetch Request and WebSocket: Determining the Quickest Option

Tips for implementing PHP Instagram Signature using AJAX

To Vue3, or not to Vue3: should I mount the body element?

Enhance your website by adding a <select> element using an AJAX call that