Javascript 如何读取json并在html中显示_Javascript_Json_Report

Javascript 如何读取json并在html中显示

javascript json report

Javascript 如何读取json并在html中显示,javascript,json,report,Javascript,Json,Report,我下了一些订单，并将订单信息存储在一个JSON文件中（order\u details.JSON）。以下是数据的外观： [{ "uniqueID": "CHECKOUT_IE01", "orderID": "4001820182", "date": "06-02-2019 16:55:32.321", "cartTotal": "€19.98" }, { "uniqueID": "CHECKOUT_DK01", "orderID": "6001825

我下了一些订单，并将订单信息存储在一个JSON文件中（

order\u 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>

我不确定是什么地方出了问题，也不确定我使用的方式是错误的。非常感谢您在客户端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这样的完整路径进行访问
您正在客户端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这样的完整路径进行访问
我认为您正在将节点
与普通浏览器JavaScript混合使用。普通JavaScript没有require
的定义，如果它有定义，那是因为您正在使用的另一个库声明它不会执行您期望的操作。从浏览器加载数据的最简单方法是使用XMLHttpRequest
，下面是一个示例：

loadURL（“file:///D:/order-detail.json”，onDataLoaded）；
函数onDataLoaded（数据）{
data=JSON.parse（数据）；
var unique_id=数据[0]。uniqueID；
var order_id=数据[0]。orderID；
var order_date=数据[0]。日期；
var cart_total=数据[0]。cartTotal；
document.getElementById（“uid”）.innerHTML=unique\u id；
document.getElementById（“oid”）.innerHTML=order\u id；
document.getElementById（“日期”）.innerHTML=订单日期；
document.getElementById（“ctotal”）.innerHTML=cart\u total；
}
函数loadURL（url，回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，url，true）；
setRequestHeader（“接受”、“应用程序/json”）；
xhr.onloadend=onloadend（xhr，回调）；
xhr.send（）；
}
函数onLoadEnd（请求、回调）{
返回函数（）{
var status=request.status；
var result=String（request.response）；
如果（状态>=200&&status<300）回调（结果）；
};
}
我认为您正在将节点
与普通浏览器JavaScript混合使用。普通JavaScript没有require
的定义，如果它有定义，那是因为您正在使用的另一个库声明它不会执行您期望的操作。从浏览器加载数据的最简单方法是使用XMLHttpRequest
，下面是一个示例：

loadURL（“file:///D:/order-detail.json”，onDataLoaded）；
函数onDataLoaded（数据）{
data=JSON.parse（数据）；
var unique_id=数据[0]。uniqueID；
var order_id=数据[0]。orderID；
var order_date=数据[0]。日期；
var cart_total=数据[0]。cartTotal；
document.getElementById（“uid”）.innerHTML=unique\u id；
document.getElementById（“oid”）.innerHTML=order\u id；
document.getElementById（“日期”）.innerHTML=订单日期；
document.getElementById（“ctotal”）.innerHTML=cart\u total；
}
函数loadURL（url，回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，url，true）；
setRequestHeader（“接受”、“应用程序/json”）；
xhr.onloadend=onloadend（xhr，回调）；
xhr.send（）；
}
函数onLoadEnd（请求、回调）{
返回函数（）{
var status=request.status；
var result=String（request.response）；
如果（状态>=200&&status<300）回调（结果）；
};
}
这应该行得通
用JSON文件路径替换/JSON/order detail.JSON

$.getJSON（'./data.json'，函数（项）{
item.forEach（功能（数据）{
返回[
document.getElementById（“uid”）.innerHTML+=data.uniqueID+“
”，
document.getElementById（“oid”）.innerHTML+=data.orderID+“
”，
document.getElementById（“日期”）.innerHTML+=data.date+“
”，
document.getElementById（“ctotal”）.innerHTML+=data.cartTotal+“
”
];
});
});

来自Json的值
这应该行得通
用JSON文件路径替换/JSON/order detail.JSON

$.getJSON（'./data.json'，函数（项）{
item.forEach（功能（数据）{
返回[
document.getElementById（“uid”）.innerHTML+=data.uniqueID+“
”，
document.getElementById（“oid”）.innerHTML+=data.orderID+“
”，
document.getElementById（“日期”）.innerHTML+=data.date+“
”，
document.getElementById（“ctotal”）.innerHTML+=data.cartTotal+“
”
];
});
});

来自Json的值
您是否尝试过更改var fs=require（['fs']）至var fs=require（'fs'）？是的，当时我得到了未捕获的错误：尚未为上下文加载模块名“fs”：。使用require（[]）
您使用的是节点
还是类似的框架？因为在普通浏览器JavaScript中，require
不是一个函数。当使用Node
时，正确的语法是require（'fs'）您将node.js与浏览器javascript混合使用require
仅因巧合而可用-它由您正在使用的任何模块绑定器提供。即使您可以加载fs
，它也不会工作。查看fetchapi，了解如何在浏览器中加载数据（）您是否尝试过更改var fs=require（['fs']）至var fs=require（'fs'）？是的，当时我得到了未捕获的错误：尚未为上下文加载模块名“fs”：。使用require（[]）
您使用的是节点
还是类似的框架？因为在普拉