when i run the js file where this function is written it works and show data in the console. but when i run it in a browser from the html file with onclick i get the error: Uncaught ReferenceError: require is not defined i tried using the function in tag but didn't work
function appendData() {
const data = require("../assets/Data/Courses.json");
var length = Object.keys(data.employees).length;
var Text = new Array();
for(let i = 0; i < length; i++)
{
//document.getElementById('test').innerHTML += "<br>"+data.employees[i].firstName + " " + data.employees[i].lastName ;
Text[i] = data.employees[i].firstName+ " " + data.employees[i].lastName ;
console.log(Text[i]);
}
}
require() is actually Node style of importing code. So it won't work in this case. I don't know your setup but if you are using vanilla JS (without babel setup), you can include .json files to your code by using the fetch API
fetch("../assets/Data/Courses.json")
.then(response => {
const data = response.json();
var length = Object.keys(data.employees).length;
var Text = new Array();
for(let i = 0; i < length; i++)
{
//document.getElementById('test').innerHTML += "<br>"+data.employees[i].firstName + " " + data.employees[i].lastName ;
Text[i] = data.employees[i].firstName+ " " + data.employees[i].lastName ;
console.log(Text[i]);
}
})
.then(data => console.log(data))
.catch(error => console.log(error));