I am creating pdf from dynamic Html but getting unwanted pattern in pdf using node.js

Question

I am creating pdf from dynamic Htmlusing node.js htmltopdf package. I have a list of doctor categories and dataset that have doctors array in each category key. But when i am generating pdf so it is giving me wrong format of pdf which i don't want.

I have a list of doctor categories in an array like this

  let categories = ['Physician', 'Psychiatrist','Audiology',.... so on]

And have dataset like this

  let masterRecord = {
   'Physician'  : [{doctor-1 object},{doctor-1 object}, ... so on], 
   'Audiology'  : [{doctor-1 object},{doctor-1 object}, ... so on],
   'Psychiatrist'  : [{doctor-1 object},{doctor-1 object}, ... so on], 
   .... so on      
  }

I have tried this code

   let masterRecord = body.masterRecord;
   let categories = Object.keys(masterRecord);
   categories.forEach(category=>{
   masterRecord[category].forEach(doctor=>{

    htmlData.partialTemplate += `<div class="data-section">
    <h3 class="subtitle fancy" style="font-size: 24px;"><span>${category} 
    </span></h3>
    <div class="data-row">
    <b><p class="m-0 font-16">${doctor.Name},${doctor.Credentials}</p></b>
    <p class="m-0 font-16">${doctor.Street}, ${doctor.City}, 
    ${doctor.State} ${doctor.Zip_Code}</p>
    <div class="tele-fax-div">
<p class="m-0 font-16">Telephone: ${doctor.Telephone}</p>
<p class="m-0 pl-5 font-16">Fax: ${doctor.Fax}</p> 
         </div>
        </div>
  </div>`
      })
})
htmlData.partialTemplate  = htmlData.partialTemplate + ` </div>
                </div>
            </body>
            </html>`
        let finalHtml = htmlData.partialTemplate;
        // console.log(finalHtml);
htmltopdf.createFromHtml(finalHtml, "doctors.pdf", function (err, success) { 
    if(err){
        res.status(201).json({status : 201, success : false, Error : err});
    }
    if (success) {
        res.status(200).json({status : 200, success : true, message : success});
    }
});

I am expecting pdf format like

                        Doctor Category-1 Name Here
     Doctor-1 Info Here
     Doctor-2 Info Here
     Doctor-3 Info Here
     Doctor-4 Info Here

                        Doctor Category-2 Name Here
     Doctor-1 Info Here
     Doctor-2 Info Here
     Doctor-3 Info Here
     Doctor-4 Info Here

                        Doctor Category-3 Name Here
     Doctor-1 Info Here
     Doctor-2 Info Here
     Doctor-3 Info Here
     Doctor-4 Info Here

But from above mentioned code i am getting pdf like this

                       Doctor Category-1 Name Here
     Doctor-1 Info Here
                       Doctor Category-1 Name Here
     Doctor-2 Info Here
                       Doctor Category-1 Name Here
     Doctor-3 Info Here
                       Doctor Category-1 Name Here
     Doctor-4 Info Here

                       Doctor Category-2 Name Here
     Doctor-1 Info Here
                       Doctor Category-2 Name Here
     Doctor-2 Info Here
                       Doctor Category-2 Name Here
     Doctor-3 Info Here
                       Doctor Category-2 Name Here
     Doctor-4 Info Here

                       Doctor Category-3 Name Here
     Doctor-1 Info Here
                       Doctor Category-3 Name Here
     Doctor-2 Info Here
                       Doctor Category-3 Name Here
     Doctor-3 Info Here
                       Doctor Category-3 Name Here
     Doctor-4 Info Here

How can i get my desired format?

Answer 1

You need to take the data-section div and h3 title out of the inner loop, otherwise it's written once for each Doctor.

It would be something like this:

...
categories.forEach( category =>
{
    htmlData.partialTemplate += `<div class="data-section">
    <h3 class="subtitle fancy" style="font-size: 24px;"><span>${category}</span></h3>`

    masterRecord[category].forEach(doctor => 
    {
        htmlData.partialTemplate += `<div class="data-row">
        <b><p class="m-0 font-16">${doctor.Name},${doctor.Credentials}</p></b>
        <p class="m-0 font-16">${doctor.Street}, ${doctor.City}, 
                  ${doctor.State} ${doctor.Zip_Code}</p>
                <div class="tele-fax-div">
                    <p class="m-0 font-16">Telephone: ${doctor.Telephone}</p>
                    <p class="m-0 pl-5 font-16">Fax: ${doctor.Fax}</p> 
                </div>
          </div>`
      })

        htmlData.partialTemplate += `</div>`

})
...