English English

Display lines from an external text file into an unordered HTML list

This is a Javascript code which allows you to display every line of an external text file (will be fetched from an URL) in an unordered <ul> HTML list. You can use this to display, for example, news headlines on this jQuery news ticker that is available on Github:


You can also create or use any other newsticker that uses <ul> to display text.

In line 3 enter the URL of your txt file that you would like to use:

function loadNewsFromNewsfile(){
	var request = new XMLHttpRequest();
	request.open('GET', 'https://WEBSEITE/MY_TEXTFILE.txt', true);
	request.onreadystatechange = function() {
		if (request.readyState === 4 && request.status === 200) {
			var type = request.getResponseHeader('Content-Type');
			//check if a txt file was loaded
			if (type.indexOf("text") !== 1) {
				//save file into an object array with all file lines
				txtfileLines = (request.responseText).split('\n');
				//create content from txt file for news ticker plugin
				document.getElementById('newsticker-content').innerHTML = '<ul>';
				var textline = "";
				for(int i=0; i<txtfileLines.length; i++){
					document.getElementById('newsticker-content').innerHTML += '<div>';
					textline = "<li style=\"font-weight: bold\"><span>" + txtfileLines[i] + "</span></li>";
					document.getElementById('newsticker-content').innerHTML += textline;
					document.getElementById('newsticker-content').innerHTML += '/<div>';					
				document.getElementById('newsticker-content').innerHTML += '</ul>';

This code reads an external text file through a GET request and saves every line in an object array. Then every line will be displayed through an unordered list item.

Run this function every hour:

setInterval(loadNewsFromNewsfile, 1000 * 60 * 60);

Important: You have to set an exception (whitelist) in your CORS (Cross-Origin Request) settings (of your web server) for the website that you want to fetch your text file from. If you use Apache2 it will look like this:

Header set Access-Control-Allow-Origin "*"​
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.