Postman Restaurant Visualizer

postman-restaurant-visualizer.js

// Just a default assertion to make sure we aren't erroring out
pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

// pull the collection id from the collection variables
var collection_id = pm.variables.get("collection_id");

// pull the api id from the collection variables
var api_key = pm.variables.get("api_key");

// This grabs the response from this API call
var jsonData = pm.response.json();

// Build a string that will be our rendered Javascript
var v = `
<script>
function runUpdate(data){

    // Provide us with a visual log
    document.getElementById('alert').innerHTML = "Updating the data using the Postman API..."; 

    // Pull the local JSON store
    var store = document.getElementById('store').value;

    // Setting the body of the first rquest to our JSON store
    data.collection.item[0].response[0].body = store;

    // Set options for our pull of collection from Postman API
    var options = {};
    options['method'] = "PUT";
    options['headers'] = {};
    options['headers']['X-API-Key'] = "` + api_key + `";
    options['body'] = JSON.stringify(data);

    // Post an update to the Postman API to update our collection
    fetch('https://api.getpostman.com/collections/` + collection_id + `',options)
    .then(response => response.json())
    .then(data => {
    document.getElementById('alert').innerHTML = "Data was successfully saved!";
    })
    .catch((error) => {
    document.getElementById('alert').innerHTML = "Something went horribly wrong!";
    });
}
 function saveData(){

     // Provide us with a visual log 
    document.getElementById('alert').innerHTML = "Starting the process of saving the data...";

    // Set options for our pull of collection from Postman API
    var options = {};
    options['method'] = "GET";
    options['headers'] = {};
    options['headers']['X-API-Key'] = "` + api_key + `";

    // Pull collection from the Postman API
    fetch('https://api.getpostman.com/collections/` + collection_id + `',options)
    .then(response =>response.json())
    .then(data => runUpdate(data))
 }
 function updateData(id){
    
    // Provide us with a visual log
    document.getElementById('alert').innerHTML = "Updating data in row " + id + "..";

    // Pull the central store in a textarea
    var store = JSON.parse(document.getElementById('store').value);

    // Update our two fields
    store[id].servesCuisine = document.getElementById('servesCuisine-' + id).value
    store[id].menu = document.getElementById('menu-' + id).value

    // Update the central store
    document.getElementById('store').value = JSON.stringify(store);
 } 
</script>
`;

// Continue building string with HTML to render
v += '<h1>Restaurants</h1>';
v += '<p>This is an editor for my mock restaurant data, pulling a list of restaurants I have stored in a Postman collection, renders to the screen as HTML using visualizer, but then allows me to edit two of the fields. Once done editing I can click the save button and it will save the data back to the example in the Postman collection, essentially using Postman collections as a data store.</p>';
v += '<table width="100%" border="0">';

// Loop through each entry in the response.
for (i = 0; i < jsonData.length; i++) {
  v += '<tr>';
  v += '<td width="30%" style="border:0px;"><input ty[e="text" onchange="updateData(' + i + ');" id="servesCuisine-' + i + '" name="menu" value="' + jsonData[i].servesCuisine + '" style="width: 100%; border: 1px solid #000; padding: 5px;"></td>';
  v += '<td width="70%" style="border:0px;"><input ty[e="text" onchange="updateData(' + i + ');" id="menu-' + i + '" name="menu" value="' + jsonData[i].menu + '" style="width: 100%; border: 1px solid #000; padding: 5px;"></td>';
  v += '</tr>';
}
v += '</table>';
v += '<div id="alert" style="text-align: center; margin-bottom: 5px;"></div>';
v += '<textarea id="store" cols="100" rows="10" style="display: none;">' + JSON.stringify(jsonData) + '</textarea>';
v += '<center><input type="button" name="save" value="Save Changes" onclick="saveData();"></center>';

// Visualize our list of data
pm.visualizer.set(v);