Import from data file into array - javascript

The code below shows should import values
from the temps.txt file but the times array
appears empty , what could be wrong?
I only get "Nan" as output.
The temps.txt file looks like this:
21.5
22.3
... etc
Here's my sourcecode:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 16px;
font-family: Arial;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
var times = [];
$.get('temps.txt', function(data) {
times = data.split("\n");
});
for (var i in times)
{
document.write(times[i] + "<BR />");
}
</script>
</html>

Something like this:
1) Move the loop into the $.get callback.
2) Use an array to build up your string
3) Append it to the body element using join.
$.get('temps.txt', function(data) {
times = data.split("\n");
var html = [];
for (var i in times) {
html.push(times[i] + '<br/>');
}
$('body').append(html.join(''));
});

Related

How to set CSS using JSON data retrieved with Javascript

I am working on an dynamic HTML document that has to change its styling based on Google Sheets entries. So far it loads the JSON data just fine. I have been looking for a way to style the CSS so I can change it on the fly. Is there anyone that can point me in the right direction?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1d3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function () {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML = adTekst + " " + achtergrondKleur + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<body>
<div id="testoutput"></div>
</body>
</html>
You can do that by toggling classes using javascript.
document.getElementById('testoutput').classList.toggle('myClass');
Other way is to change individual CSS properties
document.getElementById('testoutput').style.backgroundColor = 'RED';
Yes you can, you also give specific css to all columns with using html tags. See snippet below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1dLbBxSuyGxbG3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML ='<span>'+adTekst+'</span>'+ " " + '<span>'+achtergrondKleur+'</span>' + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<style>
div#testoutput { color: red;}
div#testoutput span { color: blue;}
div#testoutput span:first-child {color: aqua;}
</style>
<body>
<div id="testoutput"></div>
</body>
</html>
You can give color or design as per your requirement.

How to replace text in a html document using Javascript

I have written this code which I thought was correct, but although it runs without error, nothing is replaced.
Also I am not sure what event I should use to execute the code.
The test a simple template for a landing page. The tokens passed in on the url will be used to replace tags or tokens in the template.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// gets passed variables frm the url
function getQueryVar(str) {
return 'Newtext'; // JUST SCAFFOLD FOR TESTING
}
function searchReplace() {
/**/
var t = 0;
var tags = Array('keyword', 'locale', 'advert_ID');
if (document.readyState === 'complete') {
var str = document.body.innerText;
for (t = 0; t < tags.length; t++) {
//replace in str every instance of the tag with the correct value
if (tags[t].length > 0) {
var sToken = '{ltoken=' + tags[t] + '}';
var sReplace = getQueryVar(tags[t]);
str.replace(sToken, sReplace);
} else {
var sToken = '{ltoken=' + tags[t] + '}'
var sReplace = '';
str.replace(sToken, sReplace);
//str.replace(/sToken/g,sReplace); //all instances
}
}
document.body.innerText = str;
}
}
</script>
</head>
<body>
<H1> THE HEADING ONE {ltoken=keyword}</H1>
<H2> THE HEADING TWO</H2>
<H3> THE HEADING THREE</H3>
<P>I AM A PARAGRAPH {ltoken=keyword}</P>
<div>TODO write content</div>
<input type="button" onclick="searchReplace('keyword')">
</body>
</html>
So when the documment has finished loading I want to execute this code and it will replace {ltoken=keyword} withe value for keyword returned by getQueryVar.
Currently it replaces nothing, but raises no errors
Your problem is the fact you don't reassign the replacement of the string back to it's parent.
str.replace(sToken,sReplace);
should be
str = str.replace(sToken,sReplace);
The .replace method returns the modified string, it does not perform action on the variable itself.
Use innerHTML instead innerText and instead your for-loop try
tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ t+'}','g'), getQueryVar(t)))
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// gets passed variables frm the url
function getQueryVar(str)
{
return'Newtext';// JUST SCAFFOLD FOR TESTING
}
function searchReplace() {
/**/
var t=0;
var tags =Array('keyword','locale','advert_ID');
if (document.readyState==='complete'){
var str = document.body.innerHTML;
tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ t+'}','g'), getQueryVar(t)));
//tags.forEach(t=> str=str.replace(new RegExp('{ltoken='+ tags[t]+'}', 'g'), getQueryVar(tags[t])));
document.body.innerHTML=str;
}
}
</script>
</head>
<body >
<H1> THE HEADING ONE {ltoken=keyword}</H1>
<H2> THE HEADING TWO</H2>
<H3> THE HEADING THREE</H3>
<P>I AM A PARAGRAPH {ltoken=keyword}</P>
<div>TODO write content</div>
<input type ="button" onclick="searchReplace('keyword')" value="Clicke ME">
</body>
</html>

JQuery not able to process soap response

I wrote the below code to process the soap xml response using jquery, but, jQuery is unable to read the response. Is there any syntax error I made in the below code? I don't see any errors in the console. Is there anything wrong in the soap message format or the way I am reading it?
I am a bit new to this kind of implementation.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"> </script>
<script>
var xml = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://siebel.com/WebService">\
<soapenv:Header/>\
<soapenv:Body>\
<web:UpdateWO_Input>\
<web:Comments>?</web:Comments>\
<web:WOStatus>?</web:WOStatus>\
<web:WONum>?</web:WONum>\
</web:UpdateWO_Input><soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://siebel.com/WebService">\
<soapenv:Header/>\
<soapenv:Body>\
<web:UpdateWO_Input>\
<web:Comments>?</web:Comments>\
<web:WOStatus>?</web:WOStatus>\
<web:WONum>?</web:WONum>\
</web:UpdateWO_Input>\
</soapenv:Body>\
</soapenv:Envelope>\
</soapenv:Body>\
</soapenv:Envelope> '
var myObj=new Array();
var index = 0;
$(document).ready(function(){
$(xml)
.find('UpdateWO_Input').find('Comments')
.each(function(){
myObj[index] = $(this).text();
index +=1;
});
for(var i =0; i< myObj.length;i++){
$('body').append(myObj[i]+"<br/>");
}
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
I got the answer to my QUestion. Below change is required in the javascript code
var myObj=new Array();
var index = 0;
$(document).ready(function(){
$(xml)
.find('web\\:UpdateWO_Input')
.each(function(){
myObj[index] = $(this).text();
index +=1;
});
for(var i =0; i< myObj.length;i++){
$('body').append(myObj[i]+"<br/>");
}
});

document.write hangs and times out

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script language="JavaScript">
<!--
function showtags()
{
var tag;
for(i = 0; i < document.all.length; i++)
{
tag = document.all(i).tagName;
document.write(tag + ' ');
//document.write("<br>");
}
}
// -->
</script>
</head>
<body>
<script>
showtags();
</script>
</body>
</html>
If I un-comment the second document.write() in the loop inside the function then it hangs (it does not display anything and times out). I appreciate your help.
document.all is a "live" collection. Each time you loop, you add 2 new items. This means every time it evaluates the length property it's always going to be larger than i.

Read txt file and display contents as images javascript

can you please kindly assist me with this code? I am trying to populate a list of images when a button is clicked.. The screenShotsList.txt consists of files names such as:
out1.png
out2.png
out3.png
out4.png
out5.png
out6.png
out7.png
out8.png
Right now, my problem is idk the syntax to display my array as a group of images and the code does not work when a button is clicked.
Here is the code I have so far..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("button").click(function(){
var file = "C:/newbots/ctfuPoster/data/screenShotsList.txt";
function getFile(){
$.get(file,function(txt){
var lines = txt.responseText.split("\n");
for (var i = 0, len = lines.length; i < len; i++) {
// Equivalent: $(document.createElement('img'))
var img = $('<img id="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imagediv');
}
});
}
});
</script>
Thank you in advance
For this example you have a simple html page with a little script
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url : "screen.TXT",
dataType: "text",
success : function (data) {
console.log(data)
var lines = data.split(",")
for (var i = 0; i < lines.length; i++) {
var img = $('<img class="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imageDiv');
}
}
});
});
})
</script>
</head>
<body>
<div id="imageDiv"></div>
<input value="clickMe" type="button" id="button">
</body>
</html>
For the operation of the script i created a simple text file with the following structure and name screen.txt. This text file contains links to pictures of lorempixel.com must be at the same level of html page
screen.txt file:
http://lorempixel.com/output/abstract-q-c-300-300-7.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-9.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-2.jpg
For online working example visit: this page

Categories