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
Related
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);
});
How can I get the name and model of the system processor CPU in the inject content script?
Is there a way to access chrome.system.cpu in inject content script?
I saw this code from David Christian who wrote in the popup.js file that it works but I do not know how I can access its function in the inject content script.
Please help me.
// David Christian
// System info Chrome extension
var systemInformation = {
requestInfo: function() {
chrome.system.cpu.getInfo(function (cpuInfo){
var elem = document.getElementById('cpu');
var info = cpuInfo.modelName + "<br>";
info += "Architecture: " + cpuInfo.archName + "<br>";
info += "Cores: " + cpuInfo.numOfProcessors.toString() + "<br>";
// info += "Features: " + cpuInfo.features + "<br>";
info += "<table><tr><th>#</th><th>User (ms)</th><th>Kernel (ms)</th><th>Idle (ms)</th><th>Total (ms)</th></tr>";
for (var i=0; i < cpuInfo.processors.length; i++){
info += "<tr><td>" + i + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.user + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.kernel + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.idle + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.total + "</td><tr>";
}
elem.innerHTML = info + "</table>";
});
chrome.system.memory.getInfo(function (ramInfo){
var elem = document.getElementById('ram');
elem.innerHTML = (ramInfo.availableCapacity / 1073741824).toFixed(2)
+ "gb / " + Math.round(ramInfo.capacity / 1073741824).toFixed(2)
+ "gb (" + ((ramInfo.availableCapacity / ramInfo.capacity) * 100.0).toFixed(2).toString() + "% available)";
});
}
};
// Start getting system data as soon as page is ready..
document.addEventListener('DOMContentLoaded', function () {
// Ensure that we have a display straight away
systemInformation.requestInfo();
// Update the display every 3 seconds
setInterval(systemInformation.requestInfo, 3000);
});
So i have this array from my local host
{
"idmovielist": 6,
"name": "Lion King",
"thumnail_path": "https://lumiere-a.akamaihd.net/v1/images/",
"description": "cartoon",
"year_released": "1994",
"language_released": "english"
},
I wanna change the year_released based on my idmovielist
this is what I have
app.put('/movielist/upddate/:id',(req,res) =>{
let update = req.body;
mysqlConnection.query("UPDATE movielist SET year_released = '2000' WHERE idmovielist = '6'",
[update.year_released, update.idmovielist,req.params.id],
(err, results) => {
if (!err) {
res.send("Movie list is updated");
} else {
console.log(err);
}
});
});
and
when I do this it does not update note: I am writing in the hard coded values
http://localhost:3000/movielist
this is where I got the list from
$.ajax({
method:"PUT",
url: "http://localhost:3000/movielist/update/6",
dataType: "json",
data: {
idmovielist: 6,
name: 'Lion King',
thumanail_path: 'https://lumiere-a.akamaihd.net/v1/images/',
description: 'cartoon',
year_realeased: '2000',
language_released: 'english'
},
success: function (data) {
$.each(data, function(i, movie) {
const rowText = "<tr>" +
"<td>" + movie.idmovielist + "</td>" +
"<td>" + movie.name + "</td>" +
"<td>" + movie.thumbnail_path + "</td>" +
"<td>" + movie.description + "</td>" +
"<td>" + movie.year_released + "</td>" +
"<td>" + movie.language_released + "</td>" +
"<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
"<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
$("#movies").append(rowText);
});
}
});
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");
});
});
});