如何讀取json並以html顯示

Question

我正在下訂單，並將訂單信息存儲在JSON文件（ order_details.json ）中。 這是數據的樣子：

[{
    "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"
}]

現在，我想制作一個HTML報告，在其中我可以獲取所有這些數據並可以html格式顯示。

不知道我必須使用哪種技術。 到目前為止，我嘗試過的是創建如下的js代碼：

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;

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

但是它不起作用，我在控制台中遇到了以下錯誤-

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)

我不確定發生了什么問題或使用的方式有誤。 任何幫助將不勝感激

Answer 1

我認為您正在將Node與普通的瀏覽器JavaScript混合使用。 普通的JavaScript沒有為require定義，如果這樣做，是因為您正在使用的另一個庫已聲明它不會滿足您的期望。 從瀏覽器加載數據的最簡單方法是使用XMLHttpRequest ，這是一個示例：

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

出於安全原因，某些瀏覽器（例如Chrome）可能會阻止該請求。 若要解決此問題，請嘗試將JSON文件添加到IIS（然后將file://D:\\\\order-detail.json localhost/addPathHere/order-detail.json為localhost/addPathHere/order-detail.json ）。 這是一個激活本地IIS服務器的簡單教程（假設您正在使用Windows）。

Answer 2

這應該工作。

將./JSON/order-detail.json替換為您的json文件路徑。

 $.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 3

您正在客戶端javascript中使用NodeJS模式。 在前端，您可以直接使用jQuery導入JSON文件。

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

             //your implementation here..
             // Can access data like order.uniqueID , order.orderID

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

.json文件應該可以在您的域下訪問，例如CSS,JS,Image resources 。 您無法使用C:\\yourpath\\file.json類的完整路徑進行訪問

如何讀取json並以html顯示

問題描述

3 個解決方案

解決方案1
1 已采納 2019-02-07 07:58:36

解決方案2
1 2019-02-07 08:13:41

解決方案3
0 2019-02-07 07:51:26

如何讀取json並以html顯示

問題描述

3 個解決方案

解決方案1 1 已采納 2019-02-07 07:58:36

解決方案2 1 2019-02-07 08:13:41

解決方案3 0 2019-02-07 07:51:26

解決方案1
1 已采納 2019-02-07 07:58:36

解決方案2
1 2019-02-07 08:13:41

解決方案3
0 2019-02-07 07:51:26