Creating an array of objects data is a breeze with Vue.js

I have an array of data containing selected items, and I need to extract the IDs from this array into a new array so that I can send only the IDs to the back-end.

Sample Code

method

toggleSelection(rows) {
    console.log('this.multipleSelection : ',this.multipleSelection); // displays my default array (includes all data)
    this.multipleSelection.forEach(row => {
        console.log('rows: ', row) // retrieve each object in the array (extract IDs here)
        // make axios request to the backend (IDs only)
    });
},

Screenshot

Shown below is the output from the code snippets above

https://i.stack.imgur.com/O18Ja.png

Any suggestions or solutions?

javascripttypescriptvue.jsvuejs2

Answer №1

Although I haven't had the chance to dive into Vue.js yet, my experience with vanilla JavaScript tells me that the map function could be a helpful solution. Here's an example snippet that may work:

selectedIDs = this.multipleSelection.map(item => item.id);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with importing a variable in an Express application? You may encounter this error message: "Route.get() must

When trying to import requireSignin from the controllers/auth.js file into the routes/user.js file and adding it to the router.get('/user/:id', requireSignin, read); route, an error occurs: Error: Route.get() requires a callback function but r ...

javascriptnode.jsexpressexpress-jwt

What is the reason behind the failure to update the state via a reducer and Object.assign?

I'm attempting to develop a reducer without utilizing ES6. It's an outmoded PHP application that lacks a build process for transpilation. I am initializing the state: let defaultState = { accountTypes: { individual: { c ...

javascriptreduxstateredux-actions

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

I am working on a page with two iframes and a basic navigation bar. The navigation bar links are set up to target one of the iframes and replace its content when clicked. However, I am having trouble highlighting the currently selected link in the iframe - ...

javascriptphphtmlcssfirefox

Arranging JSON data by a specific attribute using JavaScript

As someone who is new to JavaScript, I have been working on some basic exercises. In my current code, I have a JSON data stored in a String that contains information about employees. My goal is to sort this data based on the age attribute and display the o ...

javascriptarraysjsonfunctionsorting

Prevent users from editing Dropdown List in Bootstrap Vue

I'm currently working on a project using "Bootstrap Vue" where I have implemented a feature that changes the input fields to readonly mode when the user clicks on the "confirm" button. This functionality is achieved through a boolean variable assigned ...

vue.jsbootstrap-4dropdownreadonly

Using AngularJs, you can access the document.body.onfocus event within the controller of

I am attempting to detect when the user closes or cancels the File Upload Window <input type="file"> Since there isn't a built-in listener for the close event of the file upload, I am trying to capture it using the document.body.focus event, s ...

javascripthtmlangularjs

What is the method to retrieve a checkbox value within a datatable when employing pagination?

I recently came across an issue with my datatable where I had implemented a checkbox in the first column of each row. However, when I attempted to check the checkbox using an AJAX call, it only worked for the first page and not for any subsequent pages. H ...

javascriptjqueryajaxcheckboxdatatable

In one application, there are two connections established with mongoose. The purpose of the second connection is to establish a dependency on the

Seeking advice: I am facing an issue where I need to establish two separate connections to the database. The first database contains login information, while the second holds all other relevant data. Can this be achieved through integration of Node.js, m ...

javascriptangularjsnode.jsmongodbmongoose

Discover the latest DOM elements using Webdriverio 5

Currently, I am developing a REact based CMS application that features a form with multiple carousels. I am encountering an issue where the webdriverio implementation is unable to locate an element, even though the same xpath works fine when tested manua ...

typescriptseleniumselenium-webdriverwebdriver-io

Is there a way to extract the content length from the raw DraftJS data?

I have a system where I am storing the data from my DraftJS editor in my database as a JSON string by passing it through convertToRaw(editorState.getCurrentContent()). For example, this is how the stored data looks like in the database: {"blocks": [{"key ...

javascriptreactjsdraftjs

Comparing strings with Ajax

I have been working on a basic ajax function setInterval(function() { var action = ''; var status = ''; $('#php-data').load('../Data/Dashboard.Data.php'); $.ajax({type: 'POST', u ...

javascriptjqueryajaxstring

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Exploring various JQuery performance tips on this insightful website Do you happen to know the significance of App.hiddenDivs ? ...

javascriptjqueryperformance

Using CKEditor in an AngularJS web application: Tips and tricks

I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...

javascriptjqueryhtmlangularjsckeditor

ng-grid defines different cellClass based on the value of the field

I am currently using the ng-grid and I want the column to display in a different color based on different values. I have tried, but not succeeded so far... $scope.gridOptions = { ........ columnDefs: [ { field: "status", displayName: "St ...

javascripthtmlangularjsangular-uiangular-ui-bootstrap

How to Retrieve Video Length using AJAX in the YouTube API

I have been working on a script to fetch the duration of a YouTube video using its id. Here is the code snippet I've written: var vidID = ""; var vidData; var vidDuration; function getResponse() { $.getJSON( "https://www.googleapis.c ...

javascriptarraysjsonajaxyoutube-api

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

No data is being retrieved by SWR

I'm struggling to make SWR work in my code. Despite trying multiple examples, I can't seem to get it functioning properly. It's frustrating because the code looks fine and should work. I feel like I must be missing something simple. Current ...

javascriptnext.jsswr

Unlock a multitude of outcomes with Sequelize

Is there a way to retrieve multiple results from Sequelize and store them in an array? For example, I want to fetch all the values in the name field from the test table and display them in the console. This is what I tried: test.findAll().them(function(re ...

javascriptnode.jssequelize.js

The ternary operator is malfunctioning when it comes to the condition

I've encountered an issue while trying to integrate a custom MUI button into my project. My goal is to have the button enabled only when 2 specific objects are not empty, otherwise it should remain disabled. Despite my efforts, the code I've writ ...

javascriptreactjsmaterial-ui

The term "primordials is not defined" is a common error

Whenever I attempt to run Gulp using the task runner, I am encountering this error message. I suspect it may be due to updating my npm project, but I'm unsure about how to resolve it. Should I try installing a different version of npm? >Failed to r ...

angulartypescriptgulp