"An in-depth guide on parsing JSON and showcasing it in an HTML format

Question

"An in-depth guide on parsing JSON and showcasing it in an HTML format

As part of my order processing, I am saving the order details into a JSON file named order_details.json. Here is an example of how the data is structured:

[{
    "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 create an HTML report that will display all this data in a formatted way.

I'm currently unsure about which technology to use for this task. So far, I have attempted to write some JavaScript code as shown 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 in the HTML file:

<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>

However, I am encountering an error and the functionality is not working as expected. The error message displayed in the console is:

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 am seeking assistance as to what might be wrong in my approach or if there is a better way to achieve this task. Any help would be greatly appreciated!

javascript json report

Answer 1

Answer №1

It seems like there may be some confusion between Node and regular Browser JavaScript. The standard JavaScript language does not include a definition for require; if you encounter it, it's likely because a separate library you're using has implemented it in a different way. One common method for loading data in a browser is through an XMLHttpRequest. Here is a sample code snippet:

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);
  };
}

For security reasons, certain browsers like Chrome may block the request. To overcome this issue, consider adding the JSON file to your IIS server (and update file://D:\\order-detail.json to

localhost/addPathHere/order-detail.json

). Here's a helpful tutorial on setting up your local IIS server (assuming you are using Windows).

Answer 2

It seems like there may be some confusion between Node and regular Browser JavaScript. The standard JavaScript language does not include a definition for require; if you encounter it, it's likely because a separate library you're using has implemented it in a different way. One common method for loading data in a browser is through an XMLHttpRequest. Here is a sample code snippet:

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);
  };
}

For security reasons, certain browsers like Chrome may block the request. To overcome this issue, consider adding the JSON file to your IIS server (and update file://D:\\order-detail.json to

localhost/addPathHere/order-detail.json

). Here's a helpful tutorial on setting up your local IIS server (assuming you are using Windows).

Answer 3

Answer №2

This method should do the trick.

Swap out ./JSON/order-detail.json with the file path of your JSON data.

$.getJSON('./data.json', function(item) {
  item.forEach(function(data) {
    return [
      document.getElementById("uid").innerHTML += data.uniqueID + "</br>",
      document.getElementById("oid").innerHTML += data.orderID + "</br>",
      document.getElementById("date").innerHTML += data.date + "</br>",
      document.getElementById("ctotal").innerHTML += data.cartTotal + "</br>"
    ];
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Values from Json</h3>
<div>
  <span id="uid"></span>
  <span id="oid"></span>
  <span id="date"></span>
  <span id="ctotal"></span>
</div>

Answer 4

This method should do the trick.

Swap out ./JSON/order-detail.json with the file path of your JSON data.

$.getJSON('./data.json', function(item) {
  item.forEach(function(data) {
    return [
      document.getElementById("uid").innerHTML += data.uniqueID + "</br>",
      document.getElementById("oid").innerHTML += data.orderID + "</br>",
      document.getElementById("date").innerHTML += data.date + "</br>",
      document.getElementById("ctotal").innerHTML += data.cartTotal + "</br>"
    ];
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Values from Json</h3>
<div>
  <span id="uid"></span>
  <span id="oid"></span>
  <span id="date"></span>
  <span id="ctotal"></span>
</div>

Answer 5

Answer №3

Utilizing the NodeJS pattern within client-side JavaScript is a common practice. When working on the front-end, you have the ability to directly import a JSON file using jQuery.

$(function(){
        $.getJSON('order-detail.json',function(data){
            $.each(data,function(i,order){

             //your code implementation here..
             // You can access data elements such as order.uniqueID and order.orderID

            });
        }).error(function(){
            console.log('error');
        });
    });

The .json file should be accessible under your domain just like CSS, JS, and image resources. Keep in mind that you cannot access it through a full path such as C:\yourpath\file.json

Answer 6

Utilizing the NodeJS pattern within client-side JavaScript is a common practice. When working on the front-end, you have the ability to directly import a JSON file using jQuery.

$(function(){
        $.getJSON('order-detail.json',function(data){
            $.each(data,function(i,order){

             //your code implementation here..
             // You can access data elements such as order.uniqueID and order.orderID

            });
        }).error(function(){
            console.log('error');
        });
    });

The .json file should be accessible under your domain just like CSS, JS, and image resources. Keep in mind that you cannot access it through a full path such as C:\yourpath\file.json

"An in-depth guide on parsing JSON and showcasing it in an HTML format

Answer №1

Answer №2

Answer №3

Similar questions

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Enhancing readability with JSON Spirit's elegant formatting

Querying SQL Server by extracting JSON data from the database tables

Using JQuery, you can easily add a new row right after the row that you have

Sharing data between two Angular 2 component TypeScript files

I'm experiencing difficulty accessing the correct identification number for my questions on the website

What methods can be implemented to ensure uniform usage of a single library version among all developers?

Pop-up with a unique MediaBox design

Looping through arrays within objects using NgFor in Angular 2/JavaScript

Generate the Xpath for the mentioned href element to use with Selenium Webdriver

AngularJS triggers after the completion of Ajax requests

The hydration error in next js is causing this code to malfunction

React checkbox remains checked even after uncheckingIs this revised version

What exactly does form.getHeaders(); mean?

Establish a predetermined selection for a drop-down menu

Updating nested forms in Angular 4

Manipulate the color of the parent text using a button nested within

What is the best way to modify a current state object without causing an endless loop of redirects?

Exploring the intricacies of initializing a JavaScript function

How to display the name of the parent object using JavaScript's prototypal inheritance