"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

How can I easily send JSON using PhpStorm/WebStorm REST client?

Guide to generating an array entry for every line of a text file in node.js

Having trouble with adding a class on scroll?

Adding external JSON data to a plain HTML document can be achieved through the process of

Remove any objects from the array that have empty values when filtered

Is there a method to store only a portion of the string object in async-storage?

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

Combining PHP JQuery Dialog with Datatables results in a sleek design loss

Determine in JavaScript if one date occurs exactly one week after another date

What is the best way to implement a Cascading Async Select feature using @atlaskit/select library?

Modifying the theme of the Angular UI-Bootstrap datepicker

Adjusting characteristics in Angular dynamically through JSON

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

Modifying the color of a header through clicking on a specific anchor link

What is the method for specifying a JSON object within a DOM element's `data` attribute?

When hovering over items in the navigation bar, the entire bar expands seamlessly

Is there a way to retrieve a label's text using their class name within a loop?

How the React Component Class Executes OnChange Event in a Closure

In Vue, when utilizing Firestore, the .where method doesn't seem to be returning any results even though they do exist in

Creating Personalized Checkboxes for Internet Explorer Versions 7 and 8