Adding Array Data to Sendgrid Templates

Question

I want to send an invoice email with data unique to each user with Sendgrid. This seems like something so simple that no one has thought to include directions on how to do this. Within the email I want to populate four columns with 'N' rows with an array like:

[{date: 05/05/15, amount: $30, user: abc123, type: A}, 
{date: X, amount: Y, user: Z, type: B} . . . ]

I don't understand how I create this template or where this template is supposed to exist for me to call it to populate for a given customer's data.

I looked at the Sendgrid videos: https://sendgrid.com/docs/User_Guide/Templates/index.html https://www.youtube.com/watch?v=Z0TmOqQarww

along with several other tutorial options like: How to pass dynamic data to email template desgined on sendgrid webapp ? :-| Sendgrid.

Unfortunately it was less than clear how to iterate through an array. I use Angular but since that lives on the front end and my sendgrid lives in Express I'm not sure that's a solution either.

I took a look at sendwithus as an option but it seems like it's probably an unnecessary complication given what I believe is a relatively simple use case; I wasn't sure if/how sendwithus is adding value.

Answer 1

I am working on the same thing right now.

Sendgrid Node Module on github, shows how to install sendgrid for node

First you want to create a javascript object to hold your configuration.

 var proccessing_payload   = {
    to      :   'webdev@example.com',
    from    :   'processing@example.com',
    subject :   'Transaction ID : 123 ~ Order is ready for processing',
    text    :   'You have a new order to process.\n Please login to process your order. \n DON'T FORGET TO SEND AN EMAIL WITH : tracking information and other useful information.',
    html    :  '<p>You have a new order to process. Please login to process your order. <br/> DON'T FORGET TO SEND AN EMAIL WITH : tracking information and other useful information.</p>'

};

That is the base setup you will need to send an email.

Now you will want to add some data to send over to your template you have created inside your sendGrid Dashboard. To do this I just extended the processing_payload object.

First : Set your filters to tell sendGrid what template you want to use.

Note* I only have one template version. I am not using other versions.

proccessing_payload.filters = {
   "templates": {
      "settings": {
        "enable": 1,
        "template_id": <YOUR TEMPLATE ID FROM SENDGRID>
      }
    }
};

Second : You need to map your data to your sendGrid Template items.

Note* In my sendGrid template I have a table and inside one of the table cells I have "-product-". That "-product-" text string will be replaced with that ever I put in the object. Example below.

 proccessing_payload.setSubs = {
   "-product-" : ['This will be the replacement for the key. You will see this text in my email']
 };

Now we send the email:

_sendGrid.sendEmail(proccessing_payload);

_sendGrid is the variable I set where I required the sendGrid controller I created. Example :

var _sendGrid = require('./sendgrid.server.controller.js');

More reference

exports.sendEmail = function(options){
var _options = options || {};

var payload   = {
    to      :   options.to,
    from    :   options.from,
    subject :   options.subject,
    text    :   options.text,
    html    :   options.html,
    setFrom :   options.setFrom,
    replyto :   options.replyto ? options.replyto : 'no-reply@poshbellies.com'
};

var email = new sendgrid.Email(payload);

if(options.filters){
    email.setFilters(options.filters);
}

if(options.setSubs){
    email.setSubstitutions(options.setSubs);
}

sendgrid.send(email, function(err, json) {
    if (err) { console.error(err); }
    console.log('//////--- SEND GRID : ');
    console.log(json);
});}

The sendEmail method inside my sendgrid.server.contoller.js looks like this.

For a little further example. Here is a snippet from my sendGrid template where I am using the -product- tag. And you dont have to use -product-. You can use #product# or whatever.

    <table width="100%">
            <tbody>
                <tr>
                    <th>qty</th>
                    <th>category</th>
                    <th>Product</th>
                </tr>
                <tr>
                    <td align="center">-qty-</td>
                    <td align="center">-category-</td>
                    <td align="center">-product-</td>
                </tr>
            </tbody>
        </table>

Hope this helps!