Read txt file and put in html div tag

Question

This is my HTML code. I would like to read the temperatures from a locally-stored *.txt file and replace the div content with the value read from *.txt file.

<div class="floortitle">Temperaturen</div>
<div class='tempfield'>
    <div class='picpos'><img src='heating.gif'></div>
    <div style="position:absolute; top: 255px; left: 65px;">
        <div class='tempbox' id='Temp1'>11&deg;C</div>
    </div>
    <div style="position:absolute; top: 255px; left: 102px;">
        <div class='tempbox' id='Temp2'>12&deg;C</div>
    </div>
    <div style="position:absolute; top: 151px; left: 145px;">
        <div class='tempbox' id='Temp3'>13&deg;C</div>
    </div>
    .
    .
    . till Temp 6
    .
</div>

The content of the *.txt file looks like this.

02.10.2013;17:40:59;Temp 1;17;
02.10.2013;17:40:59;Temp 2;27;
02.10.2013;17:40:59;Temp 3;34;
02.10.2013;17:40:59;Temp 4;46;
02.10.2013;17:40:59;Temp 5;53;
02.10.2013;17:40:59;Temp 6;61;

But the result could also start with Temp 4,5,6,1,2,3 depends of when measuring is done in time page is refreshed. To prepare the *.txt file, I use a simple tail -6 originallog.txt

I think this can be done with JavaScript, but when I search the Internet, I always find results to just output the results, without searching for String and matching to a corresponding div.

The following steps should be done:

Open *.txt file and read content
Search for Temp 1 to Temp 6 --> loop with something like document.getElementById('Temp $i')

For help with reading from file, see here: http://stackoverflow.com/questions/14446447/javascript-read-local-text-file — Kyle Muir, Oct 03 '13 at 20:30
Kyle thanks for reply, i do not have problem to open a text file, i do have problem to have a good for loop filling them into the corresponding div. Next problem is, if content of txt file starts with Temp 4, so i nead a search string. — user2844239, Oct 03 '13 at 20:39
W3Schools (http://www.w3schools.com/js/default.asp) is a good place to visit for beginners tutorials on javascript (and other web technologies), so that you can solve future challenges by yourself. — Ciaran Gallagher, Oct 03 '13 at 21:23

Christophe · Accepted Answer · 2013-10-03T21:16:27.977

Here is one way to extract your values, using a regular expression and the replace method:

var tempResult={};
string.replace(/Temp (\d);(\d+)/gm,function($0,$1,$2){tempResult[$1]=$2;});

For the record, replace is not replacing anything here, just looping through the string. $1 matches the Temp index and $2 matches the temperature.

You can then populate your divs, for example:

for (var i=1;i<7;i++) {
    document.getElementById("Temp"+i).innerHTML=tempResult[i]+"&deg;C";
}

Live demo: http://jsfiddle.net/pYB55/

score 0 · Answer 2 · answered Oct 04 '13 at 05:35

Thank you very much, this is working perfect...

<script type="text/javascript">

var ax_object ;
if(navigator.appName.search('Microsoft')>-1) { ax_object = new ActiveXObject('MSXML2.XMLHTTP'); }
else { ax_object = new XMLHttpRequest(); }

function open_file() {
ax_object.open('get', 'mytemp.txt', true); 
ax_object.onreadystatechange= read_file;
ax_object.send(null);
}

function read_file() {
if(ax_object.readyState==4) {
var tempResult={};
ax_object.responseText.replace(/Temp (\d);(\d+)/gm,function($0,$1,$2){tempResult[$1]=$2;});

for (var i=1;i<10;i++) {
document.getElementById("Temp"+i).innerHTML=tempResult[i]+"&deg;C";

}
}
}


</script>
</head>
<body onload="open_file()">
<div class="floortabs" id="ftabs"></div>
<div class="floortitle">Temperaturen</div>
<div class='tempfield'>
    <div class='picpos'><img src='heating.gif'></div>

    <div style="position:absolute; top: 255px; left: 65px;">
        <div class='tempbox' id='Temp1'>11&deg;C</div>
    </div>
    <div style="position:absolute; top: 255px; left: 102px;">
        <div class='tempbox' id='Temp2'>12&deg;C</div>
    </div>
    <div style="position:absolute; top: 151px; left: 145px;">
        <div class='tempbox' id='Temp3'>13&deg;C</div>
    </div>

</div>
</body>
</html>

even if the sourcefile is not sorted correctly the values are searched in correct matter.

Read txt file and put in html div tag

2 Answers2