ESP32 ArduinoJSON: Printing prettified JSON string

In this tutorial we will check how to print a JSON string in a prettified format, which makes it easier for a human to read. The tests shown here were performed using an ESP32 board from DFRobot.

Introduction

In this tutorial we will check how to print a JSON string in a prettified format, which makes it easier for a human to read. We will be using the ESP32 and the ArduinoJson library.

We have already covered in detail on this tutorial how to serialize JSON using the ESP32 and the ArduinoJson library. The code shown here will be very similar, except for the serializing function we will call at the end.

So, instead of printing a minified JSON string without spaces and line breaks like we did in the previous post, the function we will call to serialize the JSON document will output a nicely formatted string with some spaces and line breaks.

Naturally, in a final application where we will be sending the JSON using some protocol (HTTP, websockets, etc..), it is more efficient to use the minified version. Nonetheless, for debugging, it makes it much easier to interpret the JSON string if we use the approach shown on this tutorial.

This tutorial targets version 6 of ArduinoJSON. The tests shown here were performed using an ESP32 board from DFRobot.

The code

We will start by including the ArduinoJson.h library, so all the functionalities we need to serialize the JSON will become available.

#include <ArduinoJson.h>

Moving on to the Arduino setup function, we will start by opening a serial connection. We will later use it to output the JSON string.

Serial.begin(115200);

After that, we are going to declare an object of class StaticJsonDocument. Recall from the previous tutorial that this object will hold the memory representation of our object. This memory will be allocated on the stack.

We need to specify the capacity of the StaticJsonDocument as a template parameter. The value is specified in bytes. We will use a value of 100, which is enough for our object. For a more accurate estimation, you can use this assistant.

StaticJsonDocument<100> testDocument;

Next we will take care of adding the members of our JSON. We are going to build the following structure, for testing purposes:

{
	"sensorType": "temperature",
	"value": 10
}

To add members to our StaticJsonDocument we will use the [] operator, as shown below:

testDocument["sensorType"] = "Temperature";
testDocument["value"] = 10;

After this, we will need a buffer to hold the serialized string.

char buffer[100];

To obtain the JSON string in a prettified format, we only need to call the serializeJsonPretty function. As first input we pass our document and as second we pass the buffer we have just declared.

This function will output the serialized JSON string to the char buffer.

serializeJsonPretty(testDocument, buffer);

After this, we will print to the serial port the prettified JSON string contained in the buffer.

Serial.println(buffer);

The final code can be seen below.

#include <ArduinoJson.h>
 
void setup() {
 
  Serial.begin(115200);
   
  StaticJsonDocument<100> testDocument;
   
  testDocument["sensorType"] = "Temperature";
  testDocument["value"] = 10;
 
  char buffer[100];
 
  serializeJsonPretty(testDocument, buffer);
 
  Serial.println(buffer);
}
 
void loop() {}

Testing the code

To test the code, simply compile it and upload it to your device using the Arduino IDE. Once the procedure finishes, open the IDE serial monitor tool.

You should get an output similar to figure 1. As can be seen, it prints the JSON string in a prettified format that makes it much easier to read.

Printing the prettified JSON message built with ArduinoJson on the ESP32.
Figure 1 – Output of the program, showing the prettified JSON string.

Related Posts

2 Replies to “ESP32 ArduinoJSON: Printing prettified JSON string”

  1. Hi,

    So I kind of want to do something like:
    ——————————————————————-
    server.on(“http://www.mywebsite.com/somejson/”, HTTP_GET, [](AsyncWebServerRequest *request){

    StaticJsonBuffer jsonBuffer;
    JsonArray& root = jsonBuffer.parseArray(request->getParam(“plain”, true)->value());

    // then loop through root reading whatever data I require

    });
    ——————————————————————-
    That’s is, if this is the right way to go about an asynchronous method?

    Thanks,
    Pat

    1. Hi!

      I think this doesn’t work as you are expecting.

      When you setup a server on the ESP32, it is like you are hosting a “website” on your device.

      This means that it needs to be clients sending requests to your ESP32 (for example, a web browser).

      In the code you’ve shown, it is basically trying to create a route called “http://www.mywebsite.com/somejson/” in your ESP32 website (I think it would probably fail because the format is incorrect for declaring a route).

      But there wouldn’t be any connection between that website and your application.

      Hope this clarifies 🙂

      Best regards,
      Nuno Santos

Leave a Reply