UI Page display object from client script

[Artur Poswiata1]

Hello,

I want to display in my UI Page objects received from GET REST Message declared in my client script. How I can display them?

Client script :

function Search(){
    var nameInput = document.getElementById('text').value;
  
    if(nameInput){
            var re = new GlideAjax('SPAjaxUtils');
            re.addParam('sysparm_name','getData');
            re.addParam('input', nameInput);
            re.getXMLAnswer(DataBack);
    }
    function DataBack(response){
            var b = JSON.stringify(response);
            var data = JSON.parse(b);
            
            console.log(data);
    }
}

As You can see in variable called "data" there is array of received records. How I can display them on UI Page in HTML

Best regards,

Artur

[Artur Poswiata1]

Hello fellows,

I made this change a little bit different.

This is HTML part:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div >
	
		<input id="text" type="text" margin="auto" placeholder="Search.." name="search2" align="right"/>
		<button type="submit" class="btn btn-secondary float-center" onclick="Search()" >Search</button>
	    <div id="test"></div>
	
</div>
<div style="text-align: right;">
    <button class="btn btn-secondary float-right" onclick="Next()">Next</button> 
	<button class="btn btn-secondary float-left" onclick="Previous()">Previous</button>
    
</div>
</j:jelly>

And there is client side script.

function Search(){
	var nameInput = document.getElementById('text').value;
	//console.log(nameInput);
	if(nameInput){
	var re = new GlideAjax('SPAjaxUtils');
	re.addParam('sysparm_name','search');
	re.addParam('input', nameInput);
	re.getXMLAnswer(DataBack);
	countRecords();
	}
}
function DataBack(response){
	var data = JSON.parse(response);
	var listDiv = document.getElementById('test');
	var li=document.createElement('tabela1');
	var ul=document.createElement('tabela2');
	ul=document.createElement('tabela1');
	for (i = 0; i < data.result.length; ++i) {
	li=document.createElement('tabela2');
	li.innerHTML = data.result[i].name + "</br>";// Use innerHTML to set the text
    ul.appendChild(li); 
	listDiv.appendChild(ul);
	
		
	}
	
	
	
	
}
function countRecords(){
			var nameInput = document.getElementById('text').value;
			var re = new GlideAjax('SPAjaxUtils');
			re.addParam('input', nameInput);
			re.addParam('sysparm_name','next');
			re.addParam('offset', offset);
			re.getXMLAnswer(getTable);
}
function getTable(response){
		    //var b = JSON.stringify(response);
			var data = JSON.parse(response);
			console.log(data.result);
}
var offset = 0;
function Next(){
	
	//additional parameter to ajax about setlimit  
    //offset value from here 
	//var offset = 0;
	
    var limit = 10;
	offset = offset + limit;
	
			
}

As You see there is part related to display this object.

function DataBack(response){
	var data = JSON.parse(response);
	var listDiv = document.getElementById('test');
	var li=document.createElement('tabela1');
	var ul=document.createElement('tabela2');
	ul=document.createElement('tabela1');
	for (i = 0; i < data.result.length; ++i) {
	li=document.createElement('tabela2');
	li.innerHTML = data.result[i].name + "</br>";// Use innerHTML to set the text
    ul.appendChild(li); 
	listDiv.appendChild(ul);
	
		
	}

But if I click the search button once again, the data from object is displayed once again...

How i can make it to display it only once ?