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.
Related
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);
});
In Google Sheets, I have a list of several Purchase Order Numbers that have accumulated through time in column A of my 'POHistory' tab (see example in code area below). Right now, the script is successfully posting order numbers to my HTML UI table, but I am stuck, though, in determining how to have the if/else statement shown in the APPS Script code below grab & post only unique order number values to the HTML UI. Right now, the code is posting all 5 entries shown below. It should, though, post only the 2 unique values.
Example from POHistory Tab:
COLUMN A
SAMPLE PO
SAMPLE PO
SAMPLE PO
SAMPLE PO II
SAMPLE PO II
APPS SCRIPT:
function htmlOrders() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("POHistory");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:K" + lastRow);
var data = myRange.getValues();
var optionsHTML = " ";
for (var i = 0; i < data.length; i++){
if(data[i][0] == data[i++][0]){
continue;
}else{
optionsHTML += "<tr>";
for(var i = 0; i < data.length; i++){
optionsHTML += "<td>" + "<input type=radio name=selectedPO value=data[i][0] onclick=radio();>" +"</td>";
optionsHTML += "<td>" + data[i][0] + "</td>";
optionsHTML += "<td>" + data[i][2] + "</td>";
optionsHTML += "<td>" + data[i][1] + "</td>";
optionsHTML += "<td>" + data[i][10] + "</td>";
optionsHTML += "</tr>"};
return optionsHTML;
}}}
for (var i = 0; i < data.length; i++){
if(data[i][0] == data[i++][0]){
continue;
}else{
optionsHTML += "<tr>";
// Do we need to go through rows again looks like you
// only need the current row i and its 0,2,1,10 columns...
for(var i = 0; i < data.length; i++){
optionsHTML += "<td>" + "<input type=radio name=selectedPO value=data[i][0] onclick=radio();>" +"</td>";
optionsHTML += "<td>" + data[i][0] + "</td>";
optionsHTML += "<td>" + data[i][2] + "</td>";
optionsHTML += "<td>" + data[i][1] + "</td>";
optionsHTML += "<td>" + data[i][10] + "</td>";
optionsHTML += "</tr>"
}
// you also only go through the first loop once and then
// after the second for loop(everything) return everything.
return optionsHTML;
}
Why are we looping through data twice?
Why not create a map that tells us if we have processed that type. This way the column doesn't need to be sorted.
var optionsHTML = "";
var seenType = {};
for (var i = 0; i < data.length; i++){
if(seenType[data[i][0]){
continue;
}
seenType[data[i][0]] = true;
optionsHTML += "<tr>";
optionsHTML += "<td>" + "<input type=radio name=selectedPO value=data[i][0] onclick=radio();>" +"</td>";
optionsHTML += "<td>" + data[i][0] + "</td>";
optionsHTML += "<td>" + data[i][2] + "</td>";
optionsHTML += "<td>" + data[i][1] + "</td>";
optionsHTML += "<td>" + data[i][10] + "</td>";
optionsHTML += "</tr>"
}
// return outside of the for loop!!
return optionsHTML;
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");
});
});
});
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