Show Menu
Cheatography

Postman Visualization Cheat Sheet (DRAFT) by

This is cheat sheet for Postman Vizualization in Postman-Advance course giangtester.com

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Simple

//Code ------------
let template = `
    <div>
        {{#with res}}
            <p>{{title}} - {{author}} - {{price}}</p>
        {{/with}}
    </div>
`;

pm.visualizer.set(template, {
  res: pm.response.json().book
});

//Response ------------
{
    "book": {
        "category": "reference",
        "author": "Nigel Rees",
        "title": "Sayings of the Century",
        "price": 8.95
    }
}

//Display ------------
Sayings of the Century - Nigel Rees - 8.95

Simple Table

//Code ------------
const template = `
    <div>
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th>Isbn</th> 
                </tr>
            </thead>
            <tbody>
            {{#each data}}
                <tr>
                    <td>{{title}}</td>
                    <td>{{author}}</td>
                    <td>{{category}}</td>
                    <td>{{price}}</td>
                    <td>{{isbn}}</td>
                </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
`

var data = pm.response.json().store.book;
pm.visualizer.set(template, { data });

//Response ------------
{
    "store": {
        "book": [
            {
                "category": "reference",
                "author": "Nigel Rees",
                "title": "Sayings of the Century",
                "price": 8.95
            },
            {
                "category": "fiction",
                "author": "Evelyn Waugh",
                "title": "Sword of Honour",
                "price": 12.99
            },
            {
                "category": "fiction",
                "author": "Herman Melville",
                "title": "Moby Dick",
                "isbn": "0-553-21311-3",
                "price": 8.99
            },
            {
                "category": "fiction",
                "author": "J. R. R. Tolkien",
                "title": "The Lord of the Rings",
                "isbn": "0-395-19395-8",
                "price": 22.99
            }
        ]
    }
}
 

Complex table + css

//Code ---------------------
const template = `

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <h2 style="text-align:center">Book Store</h1>

<style>
#book {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#book td, #book th {
  border: 1px solid #ddd;
  padding: 8px;
}

#book tr:nth-child(even){background-color: #f2f2f2;}

#book tr:hover {background-color: #ddd;}

#book th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>

    <div class="table">
        <table id="book">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th>Isbn</th> 
                </tr>
            </thead>
            <tbody>
            {{#each data}}
                <tr>
                    <td>{{title}}</td>
                    <td>{{author}}</td>
                    <td>{{category}}</td>
                    <td>{{price}}</td>
                    <td>{{isbn}}</td>
                </tr>
            {{/each}}
            </tbody>
        </table>
    </div>

    <script>
        $('table').DataTable()
    </script>
`

var data = pm.response.json().store.book;
pm.visualizer.set(template, { data });

Display - Complex table + css

Display - Simple table