CODEWITHSUNDEEP
javascripthtml
BlackLotus
BlackLotus

Reputation: 553

Text to Html list

I want to make a html which will auto get the information for a *.txt file

something1
something2
something3

and output into this html file

 <!DOCTYPE html>
    <html>
    <head>
        <title>List</title>
    </head>
    <body>
            <ul>
                #here to output#
            </ul>
    </body>
    </html>

I prefer to use JavaScript. Some help is appreciated.

Upvotes: 1

Views: 2619

Answers (3)

Eran Shabi
Eran Shabi

Reputation: 15019

You need to request the file first, and then append it to your chosen place in the document.

You can for example use jQuery's get (or any other function like the native fetch), and then inject it into the ul element:

$.get("*.txt").then(x => $("ul").html("<li>" + x.split('\n').join('</li><li>') + "</li>"))

Let's break this solution by steps:

First, we need to request the external file:

 $.get("*.txt")

Read about jQuery's get here. Basicly it will request the file you asked for using network request, and return a promise.

In the Promise's then, we can do stuff with the request's result after it is resolved. In our case we want to first break it by lines:

x.split('\n')

split will return an array that will look like this: ["line 1, "line 2", "line 3"]. JS arrays have the join method, which concat them to string while putting the string you want between the items. So after we do this:

x.split('\n').join('</li><li>')

We only need to add the <li> element to the start and end of the string like this:

"<li>" + x.split('\n').join('</li><li>') + "</li>"

Finally we appent it to your chosen element using jQuery's html.

Upvotes: 1

Soni Vimalkumar
Soni Vimalkumar

Reputation: 1462

Try this

      <html>
    <head>
        <title>List</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
      <ul id="renderTxt_list">
      </ul>
      <input type="button" id="lesen" value="Read Data" />
    </body>

    <script>
    $(document).ready(function(){
        $("#lesen").click(function() {
            $.ajax({
                url : "testTxt.txt",
                dataType: "text",
                success : function (data) {
                    $html = "";
                    var lines = data.split("\n");
                    for (var i = 0, len = lines.length; i < len; i++) {
                        $html += '<li>'+lines[i]+'</li>';
                    }
                    $("body ul").append($html);
                }
            });
        });
    });
    </script>
    </html>

Upvotes: 1

Linek
Linek

Reputation: 1363

You have to request the file using AJAX call. Then you need to iterate through each line of response and generate DOM element (li in this case) and input line inside of it. After that insert each li element into your ul list.

You can achieve it using jQuery as you are probably new to JavaScript it's probably the easiest way.

What you need to do is request the file first:

$.ajax('url/to/your/file', {
    success: fileRetrieved
});

Now after the file is retrieved jQuery will call fileRetrieved method, so we have to create it:

function fileRetrieved(contents) {
    var lines = contents.split('\n');
    for(var i = 0; i < lines.length; i += 1) {
        createListElement(lines[i]);
    }
}

Now for each line from the file function fileRetrieved will call createListElement function passing line of text to it. Now we just need to generate the list element and inject it into DOM.

function createListElement(text) {
    var into = $('ul');
    var el = $('<li></li>').html(text);
    el.appendTo(into);
}

Of course you don't want to retrieve into element each time createListElement is called so just store it somewhere outside the function, it's your call, I'm just giving you the general idea.

Here is an example of the script (without AJAX call of course as we can't simulate it):

var into = $('#result');

function fileRetrieved(contents) {
  var lines = contents.split('\n');
  for (var i = 0; i < lines.length; i += 1) {
    createListElement(lines[i]);
  }
}

function createListElement(text) {
  var el = $('<li></li>').html(text);
  el.appendTo(into);
}

var text = $('#text').html();
fileRetrieved(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- This element simulates file contents-->
<pre id="text">
  fdsafdsafdsa
  fdsafd
  safdsaf
  dsafdsaf
  dsafdsafds
  afdsa
</pre>

<div id="result"></div>

Upvotes: 3

Related Questions