Substituting placeholders within a docx template remains incomplete

Utilizing this specific library, I am implementing a feature to substitute placeholders within a docx template and generate multiple documents. The technologies involved are neutralino and vue for the front-end, where I have devised a method that transmits the chosen docx file along with the necessary data to the library for processing. To populate the placeholders, I have structured a loop in the following manner:

// assembling all required data into an array
for(let i = 0; i < this.selectedData.length; i++){
  this.dataPlaceholders.push({
   key1: val1,
   key2: val2
  })
}
//invoking the library to produce documents

for(let i; i < this.dataPlaceholders.length; i++){
 this.docxTemplate.process(template, this.dataPlaceholders[i])
}

The merged data comes from two arrays, and upon console logging them, it is evident that everything is properly arranged. Per the documentation instructions, I've utilized curly brackets {} for placeholder designation, matching each placeholder name with the keys in the dataPlaceholders array. Upon experimentation, while I managed to create distinct documents, the placeholders remained untouched resulting in empty fields within the documents.

What steps can be taken to rectify this issue and ensure proper functionality?

javascriptvue.jsdocxneutralinojseasy-template-x

Answer №1

After experimenting and exploring various approaches on how to incorporate an asynchronous call within a loop, I have decided to utilize the Array.prototype.map function which has proven to be effective. I made adjustments to my Vue method that invokes the library by converting it into an async method. However, I refrained from making any changes to the then block so that I can retrieve the processed documents once the library completes its processing.

this.dataPlaceholders.map( async (data, index) => {
  let filename = data.supplier + '.docx'
  this.docxTemplate.process(template, data).then( (result) => {
    // download files code goes here
     let anchor = document.createElement('a')
     let downloadLink = URL.createObjectURL(result)
     anchor.href = downloadLink
     anchor.download = filename
     anchor.click()
  })
})

The only remaining task is to figure out how to revoke the blob URL once all the files have been successfully downloaded.

Answer №2

Instead of using the map function, I recommend utilizing a for loop. In cases where your function is asynchronous, consider implementing the following code snippet:

async function myFunc(){
    for( let i = 0; i < myArray.length; i++ ){
        await functionTocall(param1, param2)
    }
}

By employing a for loop, you ensure that each iteration will wait for the async function to return a promise, guaranteeing accurate execution within the loop.

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

Looking for the quickest hash and salt method for IP addresses in Node.JS?

Currently, there are many stipulations regarding the tracking of user data such as unique visits and returning users. An issue arises in certain regions where IP addresses are considered sensitive personal information. To continue identifying unique user ...

javascriptnode.jsencryptionhash

Resetting dynamic form changes in Vue.js explained

Currently, I am using a template like this: <div> <div v-for="(item, key) in items" :key="key"> <div> <input type="text" :value="item.title"> </div> ...

javascriptarraysformsvue.jsvuejs2

The returned JSON object lacks a specified name

After receiving the JSON data from the server, I noticed an unnamed node within the 'someStuff' object: { "someStuff": { "": { "foo": 0 }, "moreStuff": { "foo": 2 } } } This raises ...

javascriptjqueryjson

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

javascripthtmlfirebasenext.jsnext-auth

The submit button fails to produce any result

I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...

phpjavascripthtml

What is the best way to auto-fill input fields with data from a Json file

My goal is to automatically populate HTML form fields based on user selection. I have obtained code for related functions, such as fetching JSON data and creating dropdown lists, from a friend. Here is the link to that code: https://jsfiddle.net/r4zuy7tn/1 ...

javascriptjqueryhtmljson

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

I have made some changes to the Angular2 app on GitHub in order to use Express.js instead of KOA. However, when I try to load the app in FireFox, I encounter the following error in the `nodemon` console: Error: ENOENT: no such file or directory The Angul ...

javascriptangularjsnode.jsexpressangular

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

javascriptjqueryhtmlcss

Determine if a specific date occurred at least one day ago using momentjs

Is there a way to determine if a specific date is at least one day (24 hours) in the past using momentjs? For example: const currentDate = moment() const isAtLeastOneDayAgo = currentDate.subtract(dateToVerify) > 1 // How can this be done? ...

javascriptjquerydatemomentjs

Discovering the exact distance between a 'li' and a 'div' element

Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...

javascriptjqueryhtmlcss

Error 500: An invalid data type was encountered in an express.js node.js environment

Currently, I am in the process of developing an Authentication page using a combination of node.js, express.js, and mysql2. The user ID and password entered on the webpage are then passed through app.post('/login',...). However, upon submitting t ...

javascriptmysqlnode.jsexpress

Assigning various variables with a single click of a button

I am attempting to perform multiple actions within a button click event using the Vuetify framework: <v-btn flat color="indigo darken-3" @click.stop="dialogDelete = true; deleteTemporaryId = offer.id">Delete</v-btn> However, it appears that ...

vue.jsvuetify.js

Using Selenium to determine the quantity of elements that have a similar class present

Here is the test code I am using: it('count elements by class', async t => { let count = await driver.findElements(By.css('my-questions-class')).then(v => v.length); assert.equal(count, 3); // The count should b ...

javascriptnode.jsseleniumselenium-webdriver

Run C# script with the assistance of .load jquery

I have searched extensively for similar posts, but none seem to address the specific question I have regarding my project. What I am attempting to do is load different pages (.aspx) in an iframe dynamically. However, instead of using an iframe, I want to r ...

c#javascriptjqueryasp.netajax

The xModal window will only pop up once, after which a page refresh is required

My modal window opens when a user clicks on a div, but I'm having an issue. The modal window doesn't reopen when I click on the div again. Here is my code: <div onclick="document.getElementById('id01').style.display='block&apos ...

javascriptjqueryhtmlcssbootstrap-modal

Using jQuery and Laravel framework to handle a POST request

Could someone assist me with troubleshooting a jQuery post request issue? I suspect there may be an error with the routes or controller. Here is my JavaScript code for the post request: $.post('http://localhost:8000/ajax', { ...

javascriptphpjqueryajaxlaravel-5

In React + TypeScript, learn how to effectively pass down a function from a container component to a

I am currently working on developing a tabs application using React and Typescript. The main component, Tabs, manages the state and passes it down to the Content component. Additionally, I have implemented a function called 'handleName' which is ...

javascriptreactjstypescript

Discovering the scroll position in Reactjs

Utilizing reactjs, I am aiming to manage scroll behavior through the use of a `click` event. To start, I populated a list of posts using `componentDidMount`. Next, upon clicking on each post in the list using the `click event`, it will reveal the post de ...

javascriptreactjs

It is imperative that the query data is not undefined. Be certain to provide a value within your query function that is not undefined

I am utilizing a useQuery hook to send a request to a graphql endpoint in my react.js and next.js project. The purpose of this request is to display a list of projects on my website. Upon inspecting the network tab in the Chrome browser, the request appear ...

javascriptreactjsnext.jsgraphqlreact-query

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between d ...

javascripthtmlcss