Display data from SharePoint Custom List to Web part using Javascript

Full code

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>


<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function(){
GetProducts();
});
function GetProducts() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Products');
this.collListItem = oList.getItems("");
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded(sender, args) {
var listItemEnum = collListItem.getEnumerator();
var ProductInfo = '<thead' +
'<tr>' +
'<th>ID</th>' +
'<th>Product name</th>' +
'<th>Description</th>' +
'<th>Price</th>' +
'<th>Action</th>' +
'</tr>' +
'</thead>';
ProductInfo += '<tbody>';
while (listItemEnum.moveNext()) {
var oListItem = listItemEnum.get_current();
ProductInfo += '<tr>' +
'<td>' + oListItem.get_id() + '</td>' +
'<td>' + oListItem.get_item('Title') + '</td>' +
'<td>' + oListItem.get_item('Description') + '</td>' +
'<td>' + oListItem.get_item('Price') + '</td>' +
'<td><a href="#">Edit</a>&nbsp;|&nbsp;<a href="#">Delete</a></td>' +
'</tr>';
}
ProductInfo += '<tbody>';
$('#products').html(ProductInfo);
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<br>
<a href="#">Add new</a>
<hr>
<table id="products" style="width:100%">

</table>