Adding a table header on this code? - json

I would like to add headers per below but I unable to do so. I searched everywhere but still nothing. I'm still very new to this but any help would be appreciated. Can you assist?
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
for(i = 0; i < arr.length; i++) {
out += "<tr><td>" +
arr[i].id +
"</td><td>" +
arr[i].bkname +
"</td><td>" +
arr[i].pbname +
"</td><td>" +
arr[i].year +
"</td><td>" +
arr[i].type +
"</td><td>" +
arr[i].con +
"</td></tr>";
}
out += "</table>"
document.getElementById("id01").innerHTML = out;
}

Put the header in the initial value of out
var out = "<table><tr><th>ID</th><th>BKName</th><th>PBName</th><th>Year</th><Type</th><th>Con</th></tr>";

Related

the get name and model of the system processor "cpu" in the inject content script in chrome extension

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);
});

How to Skip duplicate Lines in Google Sheet w. If/Else Statement to Deliver Unique Values in HTML UI Table?

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;

Stock Quote - Google Finance (changes after 6th Sept 2017)

I'm having issues getting my stock quote to work since Google did some changes at their end. I have read the information on this link
google finance json stock quote stopped working but it didn't help.
The earlier URL to fetch information was this
https://finance.google.com/finance/info?client=ig&q= and as we know it no longer works.
Below is my code. Can someone kindly help please!
var gstock = ["BOM:500209", "PPY:000001"];
for (var i = 0; i < gstock.length; i++) {
$.getJSON("https://finance.google.com/finance?client=ig&q=" + gstock[i] + "&callback=?", function (response) {
var stockInfo = response[0];
var stockString = '<div class="stockWrapper"> ';
stockString += '<span class="stockDirectionValue' + getGlyph(stockInfo.cp) + '"> ' + '</span>';
stockString += '<span class="stockText">BSE:</span>';
stockString += '<span class="stockPrice">' + stockInfo.l + '</span>';
stockString += '<span class="stockChange">' + stockInfo.c + '</span>';
stockString += '</div>';
$('.stockBSE').prepend(stockString);
});
}
google seems to have changed their interface url from:
http://www.google.com/finance...
to:
http://finance.google.com/finance...

Sort JSON data by Date/Time value

Hope someone could help with this small task. I have an array of text blocks that have a DateTime value assigned to them. I would like to publish those text blocks sorted by DateTime so that the latest updated item is always on top.
Here is the script:
function jsonCallBack(data) {
var strRows = "";
$.each(data.News, function(i, item) {
var htmlNewsBody = item["htmlNewsBody"];
var maxLength = 120
var trimmedString = htmlNewsBody.substr(0, maxLength);
trimmedString = trimmedString.substr( 0, Math.min( trimmedString.length,
trimmedString.lastIndexOf(" ") ) );
strRows += "<div id='nrNewsItem-" + i + "'>";
strRows += "<h3>" + item["txtTitle"] + "</h3>";
strRows += "<p>" + item["dtDateTime"] + "</p>";
strRows += "<p>" + trimmedString + "...</p>";
strRows += "</div>"
});
$("#printHere").html(strRows);
};
Also have a working jsFiddle with JSON data.
You can add a custom compare method:
function compare(a,b) {
if (a.dtDateTime < b.dtDateTime) {
return 1;
}
if (a.dtDateTime > b.dtDateTime) {
return -1;
}
return 0;
}
Then in your function:
function jsonCallBack(data) {
data.News.sort(compare);
....

How to elegantly plot charts in ASP.NET MVC 3 using Highcharts?

I've been working with highcharts and MVC 3 for two years by now (I never done anything complicated, just load data and make it work stuff), and I worked with two different scenarios:
Chart code written in the directly in the view, loading data through Json
Html helper responsible to plot the chart
The Html helper approach seems to me a more elegant choice ... but then, just to illustrate to you guys, here is how it looks like (just part of it):
public static string DisplayChart(
this HtmlHelper helper,
ChartOptions options,
TimedChartSeries[] data)
{
string[] axisList = data.GroupBy(t => t.Unit).Select(t => t.Key).ToArray();
string result = "";
result += "<script type=\"text/javascript\">\n";
result += "var " + options.ChartName + ";\n";
result += "$(document).ready(function() {\n";
result += options.ChartName + "= new Highcharts.Chart({\n";
result += "chart: {renderTo: '" + options.DivName + "',zoomType: ''},\n";
result += "title: { text: '" + options.Title + "'},\n";
result += "subtitle: {text: '" + options.SubTitle + "'},\n";
result += "xAxis: { type: 'datetime'," +
"\n dateTimeLabelFormats: {month: '%e. %b', year: '%b' },"
+ "labels:{rotation: -45}\n},\n";
string axes = "";
for (int i = 0; i < axisList.Length; i++)
{
var temporaryData = data.First(t => t.Unit == axisList[i]);
if (i != 0)
axes += ", ";
axes += "{labels:{\n " +
"formatter : function(){return this.value + '" + temporaryData.Unit + "';},\n" +
"style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
"title:{text:'',style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
"}\n";
}
result += "yAxis: [\n" + axes + "],\n";
string units = "";
for (int i = 0; i < data.Length; i++)
{
if (i != 0)
units += ", ";
units += "'" + data[i].Title + "': '" + data[i].Unit + "'\n";
}
result += "tooltip:{\nshared: true,\n backgroundColor: 'none' ,\nborderColor: 'none'," +
"\nshadow:false\n ,crosshairs: true,\n" +
"formatter: function() {var s = '<table class=\"table-list\"><tr><th>Hora</th><th>'+ test(this.x) +'</th></tr>';" +
"\n$.each(this.points, function(i, point) {" +
"\ns += '<tr><td>'+point.series.name + '</td><td>'+point.y+'</td></tr>'});s+='</table>';" +
"\n$('#tooltip').html(s);}},";
result += "lang: {" +
"months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'," +
"'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']," +
"weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']},";
string series = "";
int x = 0;
for (int j = 0; j < axisList.Length; j++)
{
var temporaryData = data.Where(t => t.Unit == axisList[j]).ToArray();
for (int i = 0; i < temporaryData.Length; i++)
{
if (x > 0)
series += ", ";
series += "{name: '" + temporaryData[i].Title + "',\n color: '#" + temporaryData[i].Color.Name.Remove(0, 2) +
"', \ntype: '" + temporaryData[i].Type + "',\nunit:'" + temporaryData.First().Unit + "', \nyAxis:" + j + " , \ndata:[" + FromArrayToString(temporaryData[i].Data) +
"], marker: { enabled: false}}\n";
x++;
}
}
result += "series: [\n" + series + "]\n";
result += "});});";
result += "\nfunction test(i)\n{\nvar j = new Date(i + 2*60*60*1000);\n" +
"return new Date(i + 3*60*60*1000).format('d/m/Y H:i:s.')+j.getMilliseconds();\n}\n</script>";
result += "\n<div id=\"" + options.DivName + "\" style=\"width:" + options.Width + ";height: " + options.Height + "\"></div>" +
"<div id=\"tooltip\"></div>";
return result;
}
It's really simple to call this helper:
#Html.Raw(Html.DisplayChart((ChartOptions)Model.Options,(TimedChartSeries[])Model.Series))
As you guys can see, I have to use the Html.Raw helper in order to make it work ... that is problem nº 1 (and it probably has an easy solution). But the second problem is really great: the chart becomes entirely tied to my domain. If I wanted to plot a, say, bar chart displaying data of the last 3 years in months (each month being represented by a bar), it would be impossible to use this helper.
And it also looks kind of ugly.
So, guys, which option do you think is more elegant, the Json or the Helper approach?
About the use of Html.Raw and the easy solution:
Change your function to
public static HtmlString DisplayChart(this HtmlHelper helper, ...)
{
...
return new HtmlString(result);
}
You then may use #Html.DisplayChart(...) in your razor views.
Also, please make sure that options.DivName, options.Title, options.SubTitle etc. are properly escaped - a title like Everybody's favorite chart will break the output.