Rewrite – Modify elements in the Response body

The Rewrite feature lets you automatically change elements of a Request or Response each time they meet a predefined set of rules. In this tutorial, with a simple Regular expression, we will pinpoint specific properties in the Response and then use the Rewrite tool to automatically modify their values. When mocking data, it’s always best to change as little as possible.


In this tutorial we are going to modify a sample JSON Response to generate 3 different Responses.

  1. Append a new object to the Products’ array
  2. Remove the first object in the Products’ array
  3. Remove all objects in the Products’ array

NOTE: If you run issues with Github caching your Response, have a look at how Charles can bust cache with its’ No Caching feature

Prerequisites

View sample JSON response

Open Chrome and go to the sample JSON Response

Enable SSL Proxying

Return to Charles. Right-click the Github Request and select ‘Enable SSL Proxying’

The Request(s) you want to modify must be decrypted before you can use the Rewrite feature with it

Reload page on Chrome

Return to Charles. You should now see traffic in plain text

Open Rewrite Settings screen

Tools -> Rewrite -> tick the “Enable Rewrite” checkbox

Add URL to the Rewrite Location

Add -> Click Add (from the ‘Location’ section) -> Paste sample JSON URL into the “Host” field -> press the “tab” on your keyboard -> set the “Port” to 443

Append new element to array

Find the end of an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex shown in the accompanying screenshot finds the end of the array (denoted by the ] character). We will then use the Rewrite feature to overwrite the ] character and add a new object to the array

Create rule

Configure the rule as follows:

  • Select “Body” from the “Type” dropdown
  • Enter ] into the “Value” field of the “Match” section
  • Tick the “Regex” checkbox for the “Match” section
  • Enter ,{ “code”: “XXXXX”, “name”: “XXXXXX Account” }] into the “Value” field of the “Replace” section
  • Click OK to save
  • Click OK to close the settings screen

Verify new element was appended to the array

Click the ‘Repeat’ button to check the Rewrite works.

There should now be 4 elements in the array

Remove first element from array

Find first object in an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex shown in the accompanying screenshot finds the first ‘code’ property in the Response and then matches everything between that and value of the second ‘code’ property. We will then use the Rewrite feature to overwrite the highlighted object

Create rule

Configure the rule as follows:

  • Select “Body” from the “Type” dropdown
  • Enter code”:[\s\S]*”MTG into the “Value” field of the “Match” section
  • Tick the “Regex” checkbox for the “Match” section
  • Enter code”: “MTG into the “Value” field of the “Replace” section
  • Click OK to save
  • Click OK to close the settings screen

Verify object has been removed

Click the ‘Repeat’ button to check the Rewrite works.

The array should now only contain 2 elements

Remove all elements in an array

Find all objects in an array with Regex

I highly recommend using regex101.com or regexr.com to work out your Regex BEFORE copying it across to Charles

The Regex, shown in the accompanying screenshot, finds everything between the opening and closing array symbols i.e. [ and ]. We will then use the Rewrite feature to overwrite the highlighted data with an empty array

Create rule

Configure the rule as follows:

  • Select “Body” from the “Type” dropdown
  • Enter \[[\s\S]*] into the “Value” field of the “Match” section
  • Tick the “Regex” checkbox for the “Match” section
  • Enter [ ] into the “Value” field of the “Replace” section
  • Click OK to save
  • Click OK to close the settings screen

Verify all objects in the Products array have been removed

Click the ‘Repeat’ button to check the Rewrite works.

The Products array should now be empty

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: