Using files as data information in JavaScript Studio

JavaScript Studio support file creation and file reading using JavaScript, you can fin more reference on File reading using JavaScript explanation.
In this tutorial we will create an app where we add a contact information on a separate JavaScript file and also we will find information on the contact data file from our main app. Using separate files help us to maintain our app more celan and more productive.
Note: File creation and file reading works on JavaScript Studio Pro, You may download JavaScript Studio Pro from our Download Page

Creating Contacts App

Open JavaScript Studio
From menu click on New App
From New App window click Blank App
Copy and paste the following code

<!DOCTYPE html> <html lang='en'> <head> <title>My App Title</title> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' /> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } table{ margin-top:5px } .style1{ font-size:25px } .style2{ background:cornflowerblue; width:400px; } .style3{ margin:20px } </style> </head> <body>  <header></header> <section class='style1 style2'> <article class='style3'> Find Contact? <br/> <input type='text' id='findtxt' class='style1'/> <input type='button' value='Find' onclick='getContact()' class='style1'/> <br/> Find by <br/> <select id="findoptions" class='style1'> <option value="FirstName">First Name</option> <option value="LastName">Last Name</option> <option value="Telephone">Telephone</option> </select> <table id='result'></table> <br/> </article> <script> <ShowFileContentHere/> function getContact(){ var s=document.getElementById('findtxt'); this.result.innerHTML= SearchContact(s.value,findoptions.options[findoptions.selectedIndex].value) ; } </script> </section> <footer></footer> </body> </html>
Save the app as Contacts
We are going to create a file that will hold the contacts information and the script code. Click App File from the editor Menu.
From the left bar shown click (+) and click New File
A new empty file window will be shown as following
Copy and paste the following code

var contactInformation={FirstName:[],LastName:[],Telephone:[]}; function AddContact(name,lastname,telephone){ contactInformation["FirstName"].push(name) contactInformation["LastName"].push(lastname) contactInformation["Telephone"].push(telephone) } AddContact("Maria","Hernandez","213-0010150"); AddContact("Lissa","Aguirre","235-4007000"); AddContact("Alonso","Hernandez","213-2500120"); AddContact("Amy","Rodriguez","210-0002001"); AddContact("Leo","Sandoval","210-0002001"); //--------------------------------------------------- var msg="<p style='margin:15px'>Cannot find the Contact</p>" //--------------------------------------------------- var tableheader="<tr style='background-color:steelblue;color:white'><td>Name</td> <td>Last Name</td><td>Telephone</td></tr>" function SearchContact(findvalue,findby){ if(findby=="FirstName"){ var result=''; for (var i = 0; i < contactInformation["FirstName"].length; i++){ if( contactInformation["FirstName"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } //--------------------------------------------------- if(findby=="LastName"){ var result=''; for (var i = 0; i < contactInformation["LastName"].length; i++){ if( contactInformation["LastName"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } //--------------------------------------------------- if(findby=="Telephone"){ var result=''; for (var i = 0; i < contactInformation["Telephone"].length; i++){ if( contactInformation["Telephone"][i].toLowerCase()==findvalue.toLowerCase()){ result +='<tr><td>' + contactInformation["FirstName"][i] + '</td> '+ ' <td>' + contactInformation["LastName"][i] + '</td>'+ '<td>' + contactInformation["Telephone"][i] +'</td>' +'<tr/>'; } } if(result !=""){ return tableheader + result }else{ return msg; } } }
Save the file as ContactsData Name and select .Txt File extension, this will create a Text file on the app you are developing
Note we select .Txt file extension becuse it offer better result when reading files that contains JavaScript code from the current app you are developing.
From the file Menu click Back to code to return to the app code we are developing.
Run the app to see the Contacts app working

There are some important parts on the app that allows us to read files and show the content in any part of the app.

All file content will be reading at Run-time app.
The  allows to read a file, in this app the file is ContactsData and can be added in any part of the HTML code
Note: This HTML tag reads one file only for each app, and only reads .txt file extension, in this example ContactsData is the file we created and the HTML tag will look for ContactsData.txt, when using this HTML file reading option do not add extension to the file name beacuse it only will read a .txt files. Use it for a large files.
All File content that we are reading will be shown in <ShowFileContentHere/> tag, Since the ContactsData file contains JavaScript Code only and we want to use it as reference from the HTML code when we click the Find Button we have to add the <ShowFileContentHere/> inside of the Script tag, that's why we have the following code in the app <script> <ShowFileContentHere/> function getContact(){ var s=document.getElementById('findtxt'); this.result.innerHTML= SearchContact(s.value,findoptions.options[findoptions.selectedIndex].value) ; } </script>

I hope you get the idea how to use JavaScript Studio app and how it can helps you using Files

Posted date: 09/20/2020
Author: Melvin Dev
Twitter: @melvindevdotcom

About the author

Melvin Dev

This documentation has been written by Melvin Dev, Melvin Dev is a founder and developer of Arrowat LLC.