I am experimenting how JSF works and still a newbee. I am fetching data from my web api and would like to display the results on the UI upon page load. I am able to see the fetched data on the console but I would like to display this data in a div section. The returned data from the API is a JSON array. This is how I am currently doing inside a script tag of the page
function calledOnLoad() {
var i = 0;
fetch("http://localhost:1234/api/mydata")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(function() {
console.log("error. Could not retrieve data");
})
}
The above code would return the following table as Json array.
+-----------+-------------+-------+------+-------+
| ID | Name | Price | URL | Count |
+-----------+-------------+-------+------+-------+
| 1 | Book | 2 | url1 | 2 |
| 2 | Pen | 1 | url2 | 1 |
| 3 | pencil | 1 | url3 | 1 |
+-----------+-------------+-------+------+-------+
And i would like to display the values in a table on my page. I am successfully getting the data but i am having difficulties displaying this data.
<!DOCTYPE html>
<HTML lang = "en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html" >
<h:head>
<title> Hello world</title>
</h:head>
<h:body onload= "calledOnLoad();">
</h:body>
</HTML>
