Well, I've been at this for 3 days now and I haven't figured this out yet.
I'm trying to grab the json from this API and trying to parse it to a HTML table, but I'm having trouble. Could anyone help/point me in the right direction?
This is the API I'm trying to grab here
http://census.daybreakgames.com/json/status?game=h1z1
Here's the Code i've tried to do.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var entries = [];
var dmJSON = "http://census.daybreakgames.com/json/status?game=h1z1";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f + "</td>" + "<td>" + f.region_code + "</td>" + "<td>" + f.title + "</td>" + "<td> " + f.status + "</td>" + "<td>" + f.age + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
<th>Name</th>
<th>Region Code</th>
<th>Game</th>
<th>Server Stauts</th>
<th>Time</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
The main reason your code doesnt work is you put a data.entries param for the each function which is undefined. That has to represent a valid key from the json api.
There is two main keys inside the api (for this instance they are Live and Test) so you have to put an each loop inside another one. Then you need to use i to get the name, not f.
var dmJSON = "http://census.daybreakgames.com/json/status?game=h1z1";
$.getJSON(dmJSON, function(data) {
$.each(data.h1z1, function(i, f) {
$.each(f, function(i, f) {
var tblRow = "<tr>" + "<td>" + i + "</td>" + "<td>" + f.region_code + "</td>" + "<td>" + f.title + "</td>" + "<td> " + f.status + "</td>" + "<td>" + f.age + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
});
Related
I am new to web development in ASP.NET Core. I have a table with information, I would like to add pagination/sorting/searching to the table. Is there an easy way to add this using some sort of library/package? Thanks
I need pagination, sorting, and searching for my ASP.NET Core table.
I would like to add pagination/sorting/searching to the table. Is
there an easy way to add this using some sort of library/package?
Well, considering all the requirement you can go for jquery data table regardless of simplicity, quick implementation and free subscription. Importantly, its light weight and easy to use.
Here is the compplete example how you can implement that:
Controller:
[HttpGet]
public IActionResult ConAction()
{
var controlleractionlist = _context.Controller.ToList();
return Json(controlleractionlist);
}
Note: I am returning a simple list to demonstrate you , sorting, searching and paging functionality.
View:
<table id="userTable_info" >
<thead>
<tr>
<th>action </th>
<th>controller </th>
<th>returnType</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tBody"> </tbody>
</table>
#section scripts {
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
//Button Click Functions
function DetailsFunc(data) {
alert("User Id:" + data + " Details!");
}
function EditFunc(data) {
alert("User Id:" + data + " will be Edited!");
}
function DeleteFunc(data) {
alert("User Id:" + data + " will be deleted!");
}
//On Load
$(document).ready(function () {
$.ajax({
type: "GET",
url: 'http://localhost:5094/Home/ConAction',
dataType: "json",
contentType: "application/json",
success: function (response) {
console.log(response);
var id = 0;
$.each(response, function (index, value) {
id++;
console.log(id);
var tr = "<tr>";
tr += "<td>" + value.action + "</td>";
tr += "<td>" + value.controller + "</td>";
tr += "<td>" + value.returnType + "</td>";
tr += "<td>" + "<input type='button' id='" + id + "' class='btn btn-info' onclick='DetailsFunc(" + value.id + ")' value='Details'>" + " " + "<input type='button' id='" + value.id + "' class='btn btn-warning' onclick='EditFunc(" + value.id + ")' value='Edit'>" + " " + "<input type='button' id='" + value.id + "' class='btn btn-danger' onclick='DeleteFunc(" + value.id + ")' value='Delete'>" + "</td>" + "</tr>";
$("#tBody").append(tr);
});
$("#userTable_info").DataTable();
}
});
});
</script>
}
Output:
You could refer to official document for more details.
i want to fetch json api in html table only with value above 10
heres my code and my java script. i don't want json to fetch negative and value with 0 only positive value.,... is there anyway to short this out?
<html>
<body>
<div class="container">
<table class="table table-bordered" style="white-space:nowrap;"
id="table1">
<thead class="table-dark" style="white-space:nowrap;"
>
<tr class="tr" style="white-space:nowrap;"
>
<th>OI</th>
<th>OI Change</th>
<th>Volume</th>
<th>Change LTP</th>
<th>LTP</th>
<th>Strike Price</th>
<th>LTP</th>
<th>Volome</th>
<th>Change LTP</th>
<th>OI Change</th>
<th>OI</th>
</tr>
</thead>
<tbody id="datapcr">
<tbody>
</table>
</div>
<script>
fetch("url").then(
res => {
res.json().then(
data => {
// console.log(data.Algo);
if (data.Algo.length > 0) {
var temp = "";
data.Algo.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.oi + "</td>";
temp += "<td>" + itemData.oichange + "</td>";
temp += "<td>" + itemData.vol + "</td>";
temp += "<td>" + itemData.changeltp + "</td>";
temp += "<td>" + itemData.ltp + "</td>";
temp += "<td>" + itemData.strike + "</td>";
temp += "<td>" + itemData.ltp2 + "</td>";
temp += "<td>" + itemData.changeltp2 + "</td>";
temp += "<td>" + itemData.vol2 + "</td>";
temp += "<td>" + itemData.oichange2 + "</td>";
temp += "<td>" + itemData.oi2 + "</td></tr>";
});
document.getElementById('datapcr').innerHTML = temp;
}
}
)
}
)</script>
</body>
</html>
In terms of the response from the API, that's completely dependant on if you can provide a filter in your API request however if you simply want to filter the response, you can add an if statement to your code where you are looping through the API response data.
data.Algo.forEach((itemData) => {
if (itemData.value > 10) {
temp += "<tr>";
temp += "<td>" + itemData.oi + "</td>";
temp += "<td>" + itemData.oichange + "</td>";
temp += "<td>" + itemData.vol + "</td>";
temp += "<td>" + itemData.changeltp + "</td>";
temp += "<td>" + itemData.ltp + "</td>";
temp += "<td>" + itemData.strike + "</td>";
temp += "<td>" + itemData.ltp2 + "</td>";
temp += "<td>" + itemData.changeltp2 + "</td>";
temp += "<td>" + itemData.vol2 + "</td>";
temp += "<td>" + itemData.oichange2 + "</td>";
temp += "<td>" + itemData.oi2 + "</td></tr>";
}
});
document.getElementById('datapcr').innerHTML = temp;
now the temp HTML string will only add a new row if the current item in the response data has a value greater than 10. Note I have just used itemData.value but you will probably want to alter this to whichever value in the data needs to be positive.
HTML
This code retrieves the JSON data from the external source and displays it inside the table, it has total 50 rows of data, now I need to add pagination to the page that shows 10 data rows per page without losing the current functions[Drop-down function, Console log etc..], any help will be apprecieated, thank you!
NOTE: external JSON data doesn't work on live previews, please open the index page directly on browser.
<body>
<div class="container">
<select class="more"></select>
<table class="table table-hover pagination-page" id="table" style="width:100%">
<tbody>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Username</th>
<th>E-mail</th>
<th>Age</th>
<th>gender</th>
<th>maritial status</th>
</tr>
</tbody>
</table>
<span id="PreValue" class="pagination-page">Previous</span> |
<span id="nextValue" class="pagination-page">next</span>
</div>
</body>
</html>
SCRIPT
$(document).ready(function () {
fetch('http://fakeapi.jsonparseronline.com/users')
.then(res => res.json())
.then((out) => {
console.log('Output: ', out);
}).catch(err => console.error(err));
var users= [];
$.getJSON('http://fakeapi.jsonparseronline.com/users', function(data) {
users = data;
buildSelect();
listUsers(1, 10);
});
function buildSelect() {
var sdata = "";
$.each(users, function (key, value) {
if (key % 10 === 0) {
sdata += `<option data-start-index="${key + 1}" data-end-index="${key + 10}">${key + 1} - ${key + 10}</option>`;
}
});
$(".more").html(sdata);
}
function listUsers(start, end) {
var udata = "";
$.each(users.slice(start-1, end), function (key, value) {
udata += "<tr>" +
"<td>" + value.id + "</td>" +
"<td>" + value.firstName + "</td>" +
"<td>" + value.lastName + "</td>" +
"<td>" + value.username + "</td>" +
"<td>" + value.email + "</td>" +
"<td>" + value.age + "</td>" +
"<td>" + value.gender + "</td>" +
"<td>" + value.phone + "</td>" +
"</tr>";
});
$('#table').html(udata);
$("#table tbody tr").click(function() {
var $row = $(this).closest("tr");
var $text = $row.find("td").text();
alert($text);
});
}
buildSelect();
listUsers(1, 10);
$(document).on("change",".more",function() {
startIndex = $(":selected", this).attr("data-start-index");
endIndex = $(":selected", this).attr("data-end-index");
listUsers(startIndex, endIndex);
});
I have a JSON file with some data.
I can populate a table without an issue, the problem is that I want to format some of the cells with a CSS file and I am stuck. Been trying several ways and none works.
Basically how do I match the json data with each id on the html?
JavaScript
var products=[];
$.getJSON('products.json',function(data){
$.each(data.products, function(i, f){
var tblRow = "<tr><td><img src=" + f.image_url + "></td></tr>" + "<tr><td>" + f.title + "</td></tr>" + "<tr><td>" + f.price + "</td>" + "<td>" + f.old_price + "</td></tr>"
$(tblRow).appendTo("#list_products tbody");
});
});
HTML
<table id="list_products">
<thead>
</thead>
<tbody>
<tr><td id="prod_img"></td></tr>
<tr><td id="title"></td></tr>
<tr>
<td id="price"></td>
<td id="price_org"></td>
</tr>
</tbody>
</table>
JSON
{
"products": [
{
"title": "Revolutionary Mini-UFO (4 pack)",
"image_url": "https://cdn.fyndiq.se/product/fa/87/d7/d871294e94d095743c355b98b827b4a9a0/original.png",
"old_price": "99 kr",
"price": "69 kr",
"price_amount": 69.00
},
Don't use id, since those must be unique and you have "around 20" products. Instead use class. Just add the class names to the code that generates the HTML:
var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" +
"<tr><td class='title'>" + f.title + "</td></tr>" +
"<tr><td class='price'>" + f.price + "</td>" +
"<td class='price_org'>" + f.old_price + "</td></tr>";
Demo:
var products = [{
"title": "Revolutionary Mini-UFO (4 pack)",
"image_url": "https://cdn.fyndiq.se/product/fa/87/d7/d871294e94d095743c355b98b827b4a9a0/original.png",
"old_price": "99 kr",
"price": "69 kr",
"price_amount": 69.00
}];
$.each(products, function(i, f) {
var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" +
"<tr><td class='title'>" + f.title + "</td></tr>" +
"<tr><td class='price'>" + f.price + "</td>" +
"<td class='price_org'>" + f.old_price + "</td></tr>";
$(tblRow).appendTo("#list_products tbody");
});
body {
font-family: sans-serif;
}
.prod_img img {
max-width: 80px;
}
.title {
font-size: 1.25em;
}
.price_org {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list_products">
<tbody></tbody>
</table>
To style the dynamic cells (tds), you should assign a class to them, not an id. To do that conditionally, you can use if to check if they meet a condition. Without actual json data, I cannot say more.
Update
If you want to be able to address the bits of data, your trs each should have an id, and the tds a class. If you can control what json to send, I suggest you add an ID (could be a SKU) to each product and use that as an id for the rows:
JSON
"products": [
{
"id": 3812,
"title": "Revolutionary Mini-UFO (4 pack)",
...
},
{
"id": 7155,
"title": ...
...
}
]
JS
var rows = '';
$.getJSON('products.json',function(data){
$.each(data.products, function(i, p){
rows += '<tr id="product_'+p.id+'">';
rows += '<td class="title">'+p.title+'</td>';
rows += '... rest of tds ...';
rows += '</tr>';
});
$("#list_products tbody").append(rows);
});
I have this URL that have json LINK. How can I display this data in HTML table?
Note: I don't have access to this file, I just have this URL.
var dmJSON = "--URL--";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.Firstcolum+ "</td>" + "<td>" + f.Secondcolumn+ "</td>" + "<td> " + f.Thirdcolumn+ "</td>" + "<td>" + f.Fourthcolumn+ "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
Just by using this you can populate the data in table form