There are two techniques that will help you achieve your goal.
Getting data from REST API
The first is using XMLHttpRequest to access the REST API and return the result. The following code demonstrates a basic example.
var xhr = new XMLHttpRequest();
xhr.open("GET","http://xxx/sites/something/_api/lists/getbytitle('test')/items(10)?$select=Osoba",true);
xhr.setRequestHeader("accept","application/json; odata=verbose");
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
// request was successful
var item = JSON.parse(xhr.responseText).d;
console.log(item);
}else{
// something went wrong
alert(xhr.status + ":\n " + xhr.responseText);
}
}
};
xhr.send();
The above example just logs the result of the REST call to the JavaScript console in the browser.
Note that this code should be executed from an existing SharePoint page, so that the person running it is already authenticated. You can embed it on an existing SharePoint page via a Content Editor web part (using the script link property to specify the address of the file where you've added the code) or a Script Editor web part. There are other ways to embed code, such as custom actions or through masterpages and page layouts, but those two web parts are the easiest routes for someone just getting started.
Manipulating HTML via JavaScript
The second technique that you'll want to learn is how to manipulate HTML via JavaScript. This will allow you to take that REST result and programmatically insert the desired text/HTML onto the page on which the JavaScript is running.
There are several different methods of adding HTML to an existing element on a page. Your best bet is to use element.appendChild() or element.insertAdjacentHTML(). In either case, element is an existing HTML element on the page, which you can select using document.querySelector() and passing in a valid CSS selector as an argument. (Here's a useful CSS selector cheat sheet)
Here's an example that demonstrates some of the different ways you could programmatically insert text into the HTML page.
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","http://xxx/sites/something/_api/lists/getbytitle('test')/items(10)?$select=Osoba",true);
xhr.setRequestHeader("accept","application/json; odata=verbose");
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
// request was successful
var item = JSON.parse(xhr.responseText).d;
var osoba = item["Osoba"];
addTextToPage(osoba);
}else{
// something went wrong
alert(xhr.status + ":\n " + xhr.responseText);
}
}
};
xhr.send();
function addTextToPage(text){
// add directly to page (not recommended)
// document.write(text);
// create an element and add as text inside element
var div = document.body.appendChild(document.createElement("div"));
div.appendChild(document.createTextNode(text));
// add inside an existing element - method 1
document.querySelector("body").appendChild(document.createTextNode(text));
// add inside an existing element - method 2
document.querySelector("body").insertAdjacentHTML("beforeend",text);
// add inside an existing element - method 3
document.querySelector("body").insertAdjacentHTML("afterbegin",text);
// add outside an existing element - method 1
document.querySelector("body > div").insertAdjacentHTML("afterend",text);
// add outside an existing element - method 2
document.querySelector("body > div").insertAdjacentHTML("beforebegin",text);
}
</script>
Note that the first technique in the example, document.write() is not recommended because it essentially replaces the current page with whatever text you give it. You're usually better off manipulating the existing page using any of the subsequent methods listed above. I've commented that line out so that you don't accidentally add it to a Script Editor web part and then find it impossible to get back in to edit the code.
In case you mess up...
If you do accidentally add code to a page that makes it impossible for you to get back in to change it, you can add the query string parameter contents=1 to the page address in your browser (i.e. yourpageurl.aspx?contents=1) to open the "web part maintenance page" where you can see the list of web parts on the page and close the one that's causing the problem.