Last ever JS lesson: importing text files into code.

Getting Started

We can import text files into JavaScript.

This will be important for the assessment but is also good learning.

Task: Import data from a text file
1. First task create a text file, with any old words in it.
Call it text.txt
2. Copy and paste the function in on the right

You now have a function that can read in a text file.

3.) Use this command to store the text file in a variable.

let text = importText("text.txt");

4.) Alert the user to the variable... did it work?

function importText(textFile) {
    "use strict";
    let rawFile = new XMLHttpRequest();
    let allText = "";
    rawFile.open("Get", textFile, false);
    rawFile.onreadystatechange = function()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return allText;
}

---

Cycling through the Text

A string of text is essentially just a big array of individual characters. "Apple" is basically ['A', 'p', 'p', 'l', 'e'];

We can cycle through or select individual letters.

Task: Try the following:

var fruit = "banana";
alert(fruit[4]);


Using the split() function

Below is a string of movie titles read in from a from a .txt file:

​Using split() we can easily turn this into a list by splitting it up using the commas. E.g.:

We can test this by reading it out into the console.

Task: Make a comma separated string of items and do what we have demonstrated above.

HINT FOR THE VERY NEAR FUTURE YOU: We can split on anything, not just commas... E.g.: array.split(";")
You will need to split the text that we read in into an array based on one thing, then further split each of the items in that array based on another thing.

---

Reading from a text file and making classes

Alright, your last challenge...

Task 1: Read the file below into code, then turn that into a list of objects and display the contents in HTML (like we did with the burgers).
Hint: you will need to loop through the array of the text that you read in, then turn each item in the array into a new object that is pushed onto your new object list.

Task 2: Make the name of the hero pop up when you click on the image of them.

If you can do this then you are ready for the assessment.

heroes.txt
File Size:	0 kb
File Type:	txt

Download File

---

Or use the github link:
https://raw.githubusercontent.com/FreybergDigital/website/master/heros.txt

---

Sending things to an email

Putting things into an email to be sent is very easy and simply involves use of "window.open()" and specifying a "mailto:" like the below line of code:

window.open(`mailto:[email protected]?subject=${subject}&body=${body}`);

• "mailto:" specifies that we are opening an email.
• the ? starts the list of extra things that we are going to add as arguments that we then separate with the &
• ​${subject} is a variable that we have created that contains what we want as the subject line
• ${body} is a variable that we have created that contains the main body of the email. Here we might use a loop to add each of our heroes to the body to then email.