Building and POSTing a JSON Payload with JavaScript

I’ve been automating some QuickBooks data entry for a client, and in doing so I needed to figure out how to build and POST a JSON payload with vanilla JavaScript. Seems like the kind of thing other people might be interested in – I’m not going to share my full code base because I’m still refining things, but here’s what you need to know to perform some basic functions.

Building a JSON Payload

Before you can POST anything via the API, you’ve got to structure your data. JSON (JavaScript Object Notation) is a really easy way to do this. For some systems, the alternative is XML.

If I’ve got a spreadsheet and I want to turn each row into JSON which can be POSTed, here’s some code that will get the job done:

// loop through each row and build the data to be posted
rowData.forEach(function(row) {
  var data = {
    "TotalAmt": row[4], 
    "CustomerRef": {
    "value": row[2]
  }
}

// define the payload and stringify it
var payload = JSON.stringify(data);

So, of course, this is just one chunk of code in a much larger set of scripts. But the goal here is to say for each row, build this variable (data) that includes some values. And all of the punctuation and symbols have to be in there as well to properly build your JSON. The last step is to assign a new variable (payload) and perform the good ol’ JSON.stringify on your data variable, which now contains all of the values and correct syntax necessary to be turned into JSON.

POSTing Your JSON

var response = UrlFetchApp.fetch(url, {
            headers: {
              Accept: 'application/json',
              Authorization: 'Bearer ' + service.getAccessToken()
            },
            method: 'post',
            payload: payload,
            contentType: 'application/json'
          })

So remember, you’ve got your JSON payload assigned as variable “payload”. Now we need to plug that payload into an API POST call. To do that, we assign a new variable (response) and we use UrlFetchApp.fetch (yep, we’re using Google Apps Scripts) to send a bunch of information to a specific URL. I didn’t include the variable that contains the URL, so just pretend it’s a good URL 🙂

The data you send to the URL contains headers, as well as information about what’s being sent (application/json) and this case we also send our access token (generated using some additional scripts). Our method is “post” – if you’re familiar with CRUD, this is the RESTful version of “create”. We define our payload as variable “payload”, and we again state that we’re sending JSON data. And that’s it! You know, along with a bunch of other stuff like try/catch for errors and some if/else stuff to make sure we’re putting our JSON in the right QuickBooks company.

Advertisement