mark05e · September 12, 2022 18:49
diff --git a/postman-visualizer-filter-xpath.js b/postman-visualizer-filter-xpath.js
 // postman-visualizer-filter-xpath
 // INFO: The postman Visualizer feature allows response data to be displayed in a number of different ways. Pulling in external modules expands the capability even further. In the Visualize tab, to filter the response XML data returned in your requests.
 // USAGE: Add this code as a part of pre-req or tests for your postman request
 // REF: https://www.postman.com/odevodyssey/workspace/dev-odyssey-s-public-workspace/collection/7889102-cea7586b-169e-4372-895b-9e2e4ad8428f
 // REF: https://community.postman.com/t/visualizer-and-xml/9969

 let template = `
 <html>
 <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
 </head>
 <body>
    <div>
      <div>
        <input id="filter" style="width:450px;" type="text" placeholder="Example query: //slide">
      </div>
      <div>
        <button id="resetButton" style="background-color:red;color:white;">Reset</button>
        <input id="showErrors" type="checkbox" value="1"/>
        <span class="item-text" style="font-family:courier;">Show Evaluation Errors</span>
      </div>
      <div id="errors" style="font-family:courier;color:red;display:none;"></div>
      <div>
        <textarea id="content" style="font-family:courier;color:green;font-size:18px;"></textarea>
      </div>
    </div>
 </body>
 </html>

 <script>
 pm.getData( (error, value) => { 

    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(value.xml, "text/xml");
    
    $(function() {
        $('#filter').keyup(function() {
        var node = null;
        var xml = '';
            try {
                let filteredData = xmlDoc.evaluate($(this).val(), xmlDoc, null, XPathResult.ANY_TYPE, null);
                
                while(node = filteredData.iterateNext()) {
                    xml = xml + node.outerHTML;
                    console.log(xml)  
                }
                 
                $("#content, #errors").empty();
                $("#content").val(xml);
                
                $('#content').on( 'change paste cut', function (){
                    $(this).height(0).height(this.scrollHeight);
                    $(this).width(0).width(1085);
                }).change();
                
            } catch (err) {
                console.info(err);
                $("#errors").empty();
                $("#errors").append("<pre><code>" + err + "</code></pre>");
            }
        });
    });
    
    $( "#resetButton" ).click(function() {
        $("#content, #errors").empty();
        $("#filter").val('');
        $("#content").val('');
    })
 })

 $(function() {
  $("#showErrors").on("click",function() {
    $("#errors").toggle(this.checked);
  });
 });
 </script>`
 //console.log(pm.response.text())

 var data = {
    
    xml: pm.response.text()
    
 };

 pm.visualizer.set(template, data)
	// postman-visualizer-filter-xpath
	// INFO: The postman Visualizer feature allows response data to be displayed in a number of different ways. Pulling in external modules expands the capability even further. In the Visualize tab, to filter the response XML data returned in your requests.
	// USAGE: Add this code as a part of pre-req or tests for your postman request
	// REF: https://www.postman.com/odevodyssey/workspace/dev-odyssey-s-public-workspace/collection/7889102-cea7586b-169e-4372-895b-9e2e4ad8428f
	// REF: https://community.postman.com/t/visualizer-and-xml/9969

	let template = `
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
	</head>
	<body>
	<div>
	<div>
	<input id="filter" style="width:450px;" type="text" placeholder="Example query: //slide">
	</div>
	<div>
	<button id="resetButton" style="background-color:red;color:white;">Reset</button>
	<input id="showErrors" type="checkbox" value="1"/>
	<span class="item-text" style="font-family:courier;">Show Evaluation Errors</span>
	</div>
	<div id="errors" style="font-family:courier;color:red;display:none;"></div>
	<div>
	<textarea id="content" style="font-family:courier;color:green;font-size:18px;"></textarea>
	</div>
	</div>
	</body>
	</html>

	<script>
	pm.getData( (error, value) => {

	var parser = new DOMParser();
	var xmlDoc = parser.parseFromString(value.xml, "text/xml");

	$(function() {
	$('#filter').keyup(function() {
	var node = null;
	var xml = '';
	try {
	let filteredData = xmlDoc.evaluate($(this).val(), xmlDoc, null, XPathResult.ANY_TYPE, null);

	while(node = filteredData.iterateNext()) {
	xml = xml + node.outerHTML;
	console.log(xml)
	}

	$("#content, #errors").empty();
	$("#content").val(xml);

	$('#content').on( 'change paste cut', function (){
	$(this).height(0).height(this.scrollHeight);
	$(this).width(0).width(1085);
	}).change();

	} catch (err) {
	console.info(err);
	$("#errors").empty();
	$("#errors").append("<pre><code>" + err + "</code></pre>");
	}
	});
	});

	$( "#resetButton" ).click(function() {
	$("#content, #errors").empty();
	$("#filter").val('');
	$("#content").val('');
	})
	})

	$(function() {
	$("#showErrors").on("click",function() {
	$("#errors").toggle(this.checked);
	});
	});
	</script>`
	//console.log(pm.response.text())

	var data = {

	xml: pm.response.text()

	};

	pm.visualizer.set(template, data)