annotations are not working inside for loop

[aathirag]

const pdfDoc = new HummusRecipe(input.pdf,output.pdf);    
        for(var a=0;a<annotations[0].annotation.length;a++)
        {
            pdfDoc.editPage(annotations[0].annotation[a].page);  
            if(annotations[0].annotation[a].type == 'area')
            {
                var areaX = annotations[0].annotation[a].x;
                var areaY = annotations[0].annotation[a].y;
                var areaWidth = annotations[0].annotation[a].width;
                var areaHeight = annotations[0].annotation[a].height;
                pdfDoc.rectangle(areaX,areaY,areaWidth,areaHeight, {
                stroke: '#000000',
                lineWidth: 2
              });
            }  
           pdfDoc.endPage(); 
}
 pdfDoc.endPDF(); 

I am storing all of my annotations in the database. While downloading pdf I am fetching the annotation from the database. Using hummus recipe I am placing the annotations in the pdf and then downloading the pdf. Here is my collection.

{
    "_id" : ObjectId("5b56d0e9581875a279e8095b"),
    "annotation" : [ 
        {
            "page" : 1,
            "class" : "Annotation",
            "rotation" : 0,
            "height" : 130,
            "width" : 201.666666666667,
            "y" : 236.666666666667,
            "x" : 190,
            "color" : "#000000",
            "type" : "area"
        }, 
        {
            "page" : 1,
            "class" : "Annotation",
            "rotation" : 0,
            "height" : 43.3333333333333,
            "width" : 123.333333333333,
            "y" : 426.666666666667,
            "x" : 460,
            "color" : "#000000",
            "type" : "area"
        }
    ]
}

What is the mistake here I am doing. Only the last rectangle is showing. I need to show all the annotations.Only the last annotation is showing.

[chunyenHuang]

I think the reason could be you actually called multiple times editPage for the same page which is not a supported feature. However, I do have a work around for you.

const srcData =[{
    "_id" : ObjectId("5b56d0e9581875a279e8095b"),
    "annotation" : [ 
        {
            "page" : 1,
            "class" : "Annotation",
            "rotation" : 0,
            "height" : 130,
            "width" : 201.666666666667,
            "y" : 236.666666666667,
            "x" : 190,
            "color" : "#000000",
            "type" : "area"
        }, 
        {
            "page" : 1,
            "class" : "Annotation",
            "rotation" : 0,
            "height" : 43.3333333333333,
            "width" : 123.333333333333,
            "y" : 426.666666666667,
            "x" : 460,
            "color" : "#000000",
            "type" : "area"
        }
    ]
}, {
    ...
}];

const pdfDoc = new HummusRecipe(input.pdf, output.pdf);

const pageAnnotations = {};
srcData.forEach(data => {
    data.annotation.forEach(item => {
        const page = item.page;
        pageAnnotations[page] = pageAnnotations[page] || [];
        // group annotations based on the page number
        pageAnnotations[page].push(item);
    });
});

// Now we can write the page-number-grouped annotations
Object.keys(pageAnnotations).forEach(pageKey => {
    pdfDoc.editPage(pageKey);  

    pageAnnotations[pageKey].forEach(annotation => {
        // handle your rectangle
        if(annotation.type == 'area')
        {
            const {
                x: areaX,
                y: areaY,
                width: areaWidth,
                height: areaHeight,
            } = annotation;
            pdfDoc.rectangle(areaX, areaY, areaWidth, areaHeight, {
                stroke: '#000000',
                lineWidth: 2
            });
        }  
    });

    pdfDoc.endPage(); 
});

pdfDoc.endPDF();