Exploring the concept of reading JSON files from a local relative path without jQuery or server coding is an interesting endeavor. Some individuals opt to embed a data string variable within the JSON file, allowing for easy reference as a JavaScript script on a webpage.
<script type="text/javascript" src="./path/to/myfile.json"></script>
This approach deviates from the traditional structure of typical JSON files and functions more like a JavaScript file. While JSON files are considered JavaScript files too, complex properties may necessitate splitting the data string across multiple lines:
data = '[' +
'\n{"name" : "Independence Day", "id" : "ID"}' +
',\n{"name" : "Stars Wars", "id" : "SW"}' +
',\n{"name" : "Star Treck", "id" : "ST"}' +
']';
An alternative method involves structuring the JSON file in a conventional manner without the need for extensive string concatenation:
data = [
{
"name": "Independence Day", "id": "ID"
},
{
"name": "Stars Wars", "id": "SW"
},
{
"name": "Star Treck", "id": "ST"
}
]
Edit the file using any standard text editor such as Notepad or Wordpad available on most operating systems. Alternatively, leverage tools like Microsoft Visual Studio Code with plugins for TypeScript interpretation to simplify the process of handling .JSON files and identifying errors.
Additionally, prior to parsing the data, introduce a stringify instruction in the .js script file:
function load() {
var str = JSON.stringify(data);
var mydata = JSON.parse(str);
const n = mydata.length;
for (let i = 0; i < n; i++) {
alert(mydata[i].name);
alert(mydata[i].id);
}
}
To ensure functionality when multiple scripts are present on a main page, consider moving the load function into the main page and calling it within a separate main() function. To initiate this function upon loading, utilize the onload attribute within the html body tag.
<body onload="main()">
Declare the main() loading function in a separate script block:
<script type="text/javascript">
function main(){
load();
}
</script>
Add your own Script.js file as a src attribute if 'load' is the only startup function required. Testing may be necessary depending on specific conditions and needs.
While the movie list example showcases reading file content, practical applications may involve managing lists of employees or clients using JavaScript and HTML, bypassing costly software. Sensitive information remains secure as it resides locally rather than on a public server.
The primary motivation for utilizing JSON properties and methods lies in enabling access to local file contents through JavaScript due to security limitations restricting direct access via a web page. The use of input controls or drag-and-drop features can offer alternatives, providing users with flexibility in file selection.
The insights shared draw inspiration from previous Stack Overflow queries and Google searches, combined with personal experimentation. Despite working on older systems and browsers, with modest programming skills, I hope this explanation proves beneficial.
Warm regards, Adrian Brinas.