how to read json and display in html

I'm placing some order and storing the order information in a JSON file (order_details.json). This is how data look like :

[{
    "uniqueID": "CHECKOUT_IE01",
    "orderID": "4001820182",
    "date": "06-02-2019 16:55:32.321",
    "cartTotal": "€19.98"
}, {
    "uniqueID": "CHECKOUT_DK01",
    "orderID": "6001825057",
    "date": "06-02-2019 16:56:15.976",
    "cartTotal": "318 DKK"
}]

Now i want to make a HTML report where i can fetch all these data and can display in html format.

No idea which technology i have to use. What i have tried so far is, created js code as below:

var fs = require(['fs']);
var data = fs.readFileSync("D:\\order-detail.json", "utf8");
var data1 = JSON.parse(data);
console.log(data1);
var unique_id = data1[0].uniqueID;  
var order_id = data1[0].orderID;    
var order_date = data1[0].date; 
var cart_total = data1[0].cartTotal;

document.getElementById("uid").innerHTML = unique_id;
document.getElementById("oid").innerHTML = order_id;
document.getElementById("date").innerHTML = order_date;
document.getElementById("ctotal").innerHTML = cart_total;

and HTML

<body onload="myFunction()">
<h3>Values from Json</h3>
<div>
<span id="uid"></span>
<span id="oid"></span>
<span id="date"></span>
<span id="ctotal"></span>
</div>

But its not working, I'm getting below error in console-

dashboard.html:8 Uncaught TypeError: fs.readFileSync is not a function
    at myFunction (dashboard.html:8)
    at onload (dashboard.html:25)
myFunction @ dashboard.html:8
onload @ dashboard.html:25
require.js:5 GET file:///D:/JSON/fs.js net::ERR_FILE_NOT_FOUND
req.load @ require.js:5
load @ require.js:5
load @ require.js:5
fetch @ require.js:5
check @ require.js:5
enable @ require.js:5
enable @ require.js:5
(anonymous) @ require.js:5
(anonymous) @ require.js:5
each @ require.js:5
enable @ require.js:5
init @ require.js:5
(anonymous) @ require.js:5
setTimeout (async)
req.nextTick @ require.js:5
o @ require.js:5
requirejs @ require.js:5
myFunction @ dashboard.html:7
onload @ dashboard.html:25
require.js:5 Uncaught Error: Script error for "fs"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:5)
    at HTMLScriptElement.onScriptError (require.js:5)

i'm not sure whats wrong or the way i'm using is wrong. Any help would be great appreciated

Solution

I think you are mixing Node with plain Browser JavaScript. Normal JavaScript does not have a definition for require, if it does it is because another library you are using has declared it will not do what you are expecting. The simplest way to load data from a browser is using an XMLHttpRequest, here is an example:

loadURL("file:///D:/order-detail.json", onDataLoaded);

function onDataLoaded(data) {
  data = JSON.parse(data);
  var unique_id = data[0].uniqueID;
  var order_id = data[0].orderID;
  var order_date = data[0].date;
  var cart_total = data[0].cartTotal;

  document.getElementById("uid").innerHTML = unique_id;
  document.getElementById("oid").innerHTML = order_id;
  document.getElementById("date").innerHTML = order_date;
  document.getElementById("ctotal").innerHTML = cart_total;
}

function loadURL(url, callBack) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onloadend = onLoadEnd(xhr, callBack);
  xhr.send();
}

function onLoadEnd(request, callBack) {
  return function() {
    var status = request.status;
    var result = String(request.response);
    if (status >= 200 && status < 300) callBack(result);
  };
}

Due to security reasons, some browsers (i.e. Chrome) might block the request. To resolve this, try adding the JSON file to your IIS (and then change file://D:\\order-detail.json to localhost/addPathHere/order-detail.json). Here is a simple tutorial to activate your local IIS server (assuming you are using windows).