Generating consecutive numerical values within the auto table JSPDF column VusJs

https://i.sstatic.net/idhrw.png

    columns: [
      {
        header: 'No',
        dataKey: 'Index',
      },
      { header: 'No Registrasi', dataKey: 'no_register' },
      { header: 'Kode Partai', dataKey: 'kode_partai' },
      { header: 'Sumber', dataKey: 'kode_partai' },
      { header: 'Tanggal Panen', dataKey: 'tanggal_panen' },
      { header: 'Tanggal Terima', dataKey: 'tanggal_penerima' },
    
    ],

{
    "success": true,
    "message": "Data ditemukan",
    "data": [
        {
            "id": 15,
            "user_id": 3,
            "no_register": "KREO",
            "kode_partai": "00PPPP",
            "legal_source": "Terdaftar",
            "jenis_sbw_kotor": "9000",
            "tanggal_panen": "2022-02-10",
            "tanggal_penerima": "2022-02-16",
            "alamat": "jl kandir",
            "no_kendaraan": "K 8992993 KW",
            "jumlah_sbw_kotor": "9000",
            "jumlah_pcs": "9000",
            "jumlah_box": "90999",
            "kadar_air": "9000",
            "warna": "Cream",
            "kondisi": "ok",
            "status": "Adding",
            "harga_kulak": "900000000",
            "created_at": "2022-02-24T05:48:07.000000Z",
            "updated_at": "2022-02-24T05:48:07.000000Z"
        },
        {
            "id": 16,
            "user_id": 3,
            "no_register": "KREO",
            "kode_partai": "00PPPP",
            "legal_source": "Terdaftar",
            "jenis_sbw_kotor": "9000",
            "tanggal_panen": "2022-02-10",
            "tanggal_penerima": "2022-02-16",
            "alamat": "jl kandir",
            "no_kendaraan": "K 8992993 KW",
            "jumlah_sbw_kotor": "9000",
            "jumlah_pcs": "9000",
            "jumlah_box": "90999",
            "kadar_air": "9000",
            "warna": "Cream",
            "kondisi": "ok",
            "status": "Adding",
            "harga_kulak": "900000000",
            "created_at": "2022-02-24T05:48:07.000000Z",
            "updated_at": "2022-02-24T05:48:07.000000Z"
        }
    ]
}

I have attempted to utilize index + 1, but it does not seem to be effective. My goal is to fill the dataKey with sequential numbers based on the quantity of Arrays received from the api service's response. Is there another approach that can assist me in adding serial numbers in the 'NO' column? I am using Vue.js.

javascriptvue.jsjspdf-autotable

Answer №1

To enhance your dataset, consider incorporating an index field using the map function.


const updatedData = incomingData.map((item, index) => ({...item, Index: index+1}));

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

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

javascriptjqueryhtmljspdojo

Pause the audio using jQuery when the slide changes

I have a Drupal website with a slider that includes an audio player on each slide. I need the audio to stop whenever the slide changes. The slider plugin I'm using is owlCarousel. Here is my current code: $("#owl-demo").owlCarousel({ afterAction: ...

javascriptjqueryaudiodrupal

What is the best way to create a compound query in Firebase?

I am working on a TypeScript script to search for a city based on its population... import { getFirebase } from "react-redux-firebase"; ... get fb() { return getFirebase(); } get fs() { return this.fb.firestore(); } getCollection(coll ...

javascriptreactjsfirebasegoogle-cloud-firestore

Struggling to deserialize JSON information into a Dictionary with key and value pairs of strings

Looking to convert this JSON data into a Dictionary using native Javascript. var jsonData = "{"Symptom":[true,true,true],"Action":[true,true],"AllArea":true}"; However, encountering an error when trying to deserialize it with the following code: Diction ...

javascriptjsonserialization

Bluebird Performing a series of promises in an array

I'm facing an issue while attempting to execute the following function. Create a file Send an email with the file attached Delete the file Despite my code below, when I check the received email, the file seems to have content that is not found. ...

javascriptnode.jspromisebluebird

Creating a circular shape around a specific location on a map is a common task in Openlayers. Here's a

I have been attempting to create a circle based on the point/coordinate where a user clicks. While I know how to generate a point and found a function that can create a circle based on said point (similar to a buffer or range ring), it appears to only func ...

javascriptopenlayersproximity

What is the best approach for dynamically accessing or rendering Children within an Angular Component?

I am facing an issue with reusing a component called wrapper with different child components. I found some helpful resources such as this SO question and this article. However, these only address cases where the child component is known in advance. In my s ...

javascriptangulartypescript

PHP Troubleshooting: Resolving Ajax Problems in Symfony 4

I am currently learning Symfony and attempting to integrate Ajax with Symfony. I have placed the Ajax code within a javascript block in Twig and added a simple function in the controller file to test its functionality. However, it seems that the Ajax is no ...

javascriptphpjqueryajaxsymfony

SmoothDivScroll jQuery Plugin may encounter issues when JavaScript files are loaded asynchronously

I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...

javascriptjquerypluginsasynchronoussmooth-scrolling

Pressing the non-responsive button automatically chooses the following item

This example demonstrates how to create a disabled button: import { Grid, IconButton } from "@material-ui/core"; import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; export default function App() { const handleClick = (e) ...

javascriptreactjsmaterial-ui

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

I'm attempting to utilize a random string (UUID v4) using vue-uuid for existing items and future additions to the list in my to-do list style application. However, I'm uncertain about the correct syntax to use. After installation, I included it ...

javascriptvue.js

Updating array object properties within nested for loops in JavaScript can be challenging

Exploring nested loops: for(let i = 0; i < availabilities.length; i++){ if(availabilities[i].round === 1){ // Identify objects with the same event_team_user_id and update status property let indices = helperService.findArrayIndices( ...

javascriptarraysfor-loop

Solving Issues with URL Parameters and AJAX

My JSP page has a JavaScript function called loadData() that is triggered when the page loads. This function makes an AJAX request to a servlet in order to retrieve data and return the necessary HTML content to display on the page. I am trying to call thi ...

javascriptajaxjspservletsparameters

troubles with variables in AngularJS Formly templates

Having trouble displaying model or other variables in my template? Check out this link for reference: http://jsbin.com/wofulinufo/edit?html,js,output. Question: What is the solution for displaying variables from controller? Even when I try using {{model} ...

javascriptangularjsangular-formly

Show the time in hours and minutes (00:00) while rounding off seconds to the nearest minute

I need the time to always display with leading zeros when less than 10. For example, if a task took 3 hours, 7 minutes, and 33 seconds, it should be shown as 03:08. Currently, I have the buttons disabled after they are clicked to prevent restarting the ti ...

javascriptangularjsjsfiddle

Switching images through onmouseover, onmouseout, and onclick interactions

I have two images named img1 and img2. Here is my code: function roll(id, img_name, event_name, img_id) { var state ; if(event_name == 'mouseover') { state = false;rollover();} else if(event_name == 'mouseout') { ...

javascriptonclickonmouseoutonmousemove

Unable to create selected buttons in Vue.js

I'm having trouble creating buttons that can select all options when clicking on either size or color. The buttons aren't showing up at all. Can someone help me identify the issue? I've attempted various solutions but none seem to work. Any ...

javascriptvue.jsbutton

Variable scope not properly maintained when there is a change in the Firebase promise

I am currently working on developing a controller function to handle signup submissions using Firebase. However, I've encountered an issue where the variables within the scope (controllerAs: $reg) do not seem to update correctly when modified inside a ...

javascriptangularjsfirebasefirebase-authentication

Discover the versions of key libraries/modules within the webpack bundle

Is it possible to identify all the libraries, scripts, or modules included in a webpack bundle through the developer's console of a website that is already running, without access to its codebase? Additionally, is there a way to determine the version ...

javascriptnpmwebpack

"Disabling Dropzone.js functionality once a file has been selected - here's how

When using my dropzone, I typically choose a file to save first and then click the save button. However, I am facing an issue: how can I disable the dropzone area after selecting a file? I attempted the following approach: accept: function (file, done) { ...

javascriptjquerydropzone.js