CODEWITHSUNDEEP
javascript
user2844239
user2844239

Reputation: 43

Read txt file and put in html div tag

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:

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

Upvotes: 4

Views: 4063

Answers (2)

user2844239
user2844239

Reputation: 43

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.

Upvotes: 0

Christophe
Christophe

Reputation: 28114

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/

Upvotes: 2

Related Questions