Ik ben aan het uitvinden hoe je een .txt file (via een link van een andere server) kunt splitten. Het gaat om een "Now Playing" bestandje, die er bijvoorbeeld zo kan zien: Avicii - Wake Me Up. Nu wil ik artiest en titel in verschillende divs zetten, zonder het streepje terug te zien. Hoe is dit het beste op te lossen?
>> ... een .txt file (via een link van een andere server) kunt splitten ...
Okay, het probleem is: je kan met javascript niet zomaar bestanden lezen op anderman's servers.
Maar laat me beginnen met dit even te doen met lokale bestanden.
Zet data.txt en index.php in een zelfde map en copy/paste alles.
Is dit al ongeveer waar je naartoe wil?
Merk op: dit is Ajax. Als javascript bestanden leest (bv. ook een .xlm) gebeurt dit met Ajax.
data.txt
foo - bar
Hello - World
Romeo - Julia
Alfa - Omega
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() { // pagina is geladen
// settings
var file = 'data.txt'; // TO DO: aanpassen naar jouw bestandsnaam
$('#click_here').click(function(e) { // de gebruiker klikt op "Klik"
// we gaan via Ajax het bestand laden en lezen
$.ajax({
url: file,
success: function(contents) { // wordt getriggerd op het moment dat Ajax terug is met een antwoord op het Ajax-verzoek
// de variabele contents bevat de inhoud van het bestand
// splitten per nieuwe lijn.
var lines = contents.split("\n") || contents.split("\r\n");
var resultString = "";
// lus over de lijnen
for (var i=0; i<lines.length; i++) {
// splitten door het "-" teken
var items = lines[i].split("-");
resultString += '<div><span class="author">' + items[0] + '</span><span class="title">' + items[1] + '</span></div>';
}
// de resultString in de response div steken
$('#response').html(resultString);
}
});
});
});
</script>
<style>
#click_here {
cursor: pointer;
}
.author {
color: red;
}
.title {
color: blue;
}
</style>
</head>
<body>
<div id="click_here">Klik</div>
<div id="response"></div>
</body>
</html>
