Javascript HTML不喜欢require（）。。。。当我在index.js文件中使用
这个问题不同于： 我只是试着实现那个改变，但什么都没有 我发现，当我通过web浏览器运行json字符串结果时 未捕获引用错误：未定义require 我正在使用Node.js作为运行这个的平台 在调查了这件事之后，我仍然没有进一步的进展。我不想使用Browserfy或webpack。我没有使用Jquery 当我将我的两个json字符串硬编码到index.js中时，这会起作用。然而，我需要它是可变的 我需要一种纯JavaScript的方式来读取.json文件，而不需要使用require。 如我所见Javascript HTML不喜欢require（）。。。。当我在index.js文件中使用,javascript,html,node.js,Javascript,Html,Node.js,这个问题不同于： 我只是试着实现那个改变，但什么都没有 我发现，当我通过web浏览器运行json字符串结果时 未捕获引用错误：未定义require 我正在使用Node.js作为运行这个的平台 在调查了这件事之后，我仍然没有进一步的进展。我不想使用Browserfy或webpack。我没有使用Jquery 当我将我的两个json字符串硬编码到index.js中时，这会起作用。然而，我需要它是可变的 我需要一种纯JavaScript的方式来读取.json文件，而不需要使用require。 如我所见
let fs = require('fs');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Out Put to HTML Page</title>
</style>
</head>
<body>
<div id ='TestResults'>
<div id = 'TestOutput'>Nothing Yet</div>
</div>
<div id ='ErrorResults'>
<div id = 'ErrorOutPut'>Nothing Yet</div>
</div>
<script type = 'text/javascript' src = 'index.js'></script>
</body>
</html>
测试输出到HTML页面
还没有
还没有
let myJsonString = require('../../ResultsArray/ResultsArray');
let myJsonStringError = require('../../ResultsArray/ErrorArray');
function result(results){
if(results === 'YesNo')
{
return 'Passed'
}
if(results === 'NoYes')
{
return 'Failed'
}
else
{
return 'Unknown'
}
}
function time (value){
// 1- Convert to seconds:
let seconds = (value / 1000).toFixed(2);
// 2- Extract hours:
let hours = parseInt( seconds / 3600 ); // 3,600 seconds in 1 hour
seconds = seconds % 3600; // seconds remaining after extracting hours
// 3- Extract minutes:
let minutes = parseInt( seconds / 60 ); // 60 seconds in 1 minute
// 4- Keep only seconds not extracted to minutes:
seconds = (seconds % 60).toFixed(2);
return ([hours+":"+minutes+":"+seconds]);
}
function testTemplateErrors (test){
return `
<tr>
<td class='TestGroup'>${test.Folder}</td>
<td class='TestName'>${test.Test_Name}</td>
<td class='TestsStatus'>${test.Running}</td>
<td class='TestRunTime'>${time(test.Run_Time)}</td>
<td class= 'TestResult'>${result(test.Passed + test.Failed)}</td>
</tr>
`
}
function testTemplateResults (test){
return `
<tr>
<td class='TestGroup'>${test.Folder}</td>
<td class='TestName'>${test.Test_Name}</td>
<td class='TestsStatus'>${test.Running}</td>
<td class='TestRunTime'>${time(test.Run_Time)}</td>
<td class= 'TestResult'>${result(test.Passed + test.Failed)}</td>
</tr>
`
}
if(myJsonString && myJsonString.length)
{
document.getElementById('TestResults').innerHTML = `
<h1 class='ContentTitle'> Regression Tests (${myJsonString.length} Tests Ran)</h1>
<table><tr>
<th>Result Folder Name</th>
<th>Result Test Name</th>
<th>Result Running</th>
<th>Result Run Time</th>
<th>Result Result</th>
</tr><tr>
${myJsonString.map(testTemplateResults).join('')}
</tr></table>
<p class='footer'> These ${myJsonString.length} Results were added recently. </p>
`
}
if(myJsonStringError && myJsonStringError.length)
{
document.getElementById('ErrorResults').innerHTML = `
<h1 class='ContentTitle'> Error Results (${myJsonStringError.length} Errors Occurred)</h1>
<table><tr>
<th>Error Folder Name</th>
<th>Error Test Name</th>
<th>Error Running</th>
<th>Error Run Time</th>
<th>Error Result</th>
</tr><tr>
${myJsonStringError.map(testTemplateErrors).join('')}
</tr></table>
<p class='footer'> These ${myJsonStringError.length} Results were added recently. </p>
`
}
让myJsonString=require（'../../ResultsArray/ResultsArray'）；
让myJsonStringError=require（'../../ResultsArray/ErrorArray'）；
功能结果（结果）{
如果（结果=='YesNo'）
{
返回“已通过”
}
如果（结果=='NoYes'）
{
返回“失败”
}
其他的
{
返回“未知”
}
}
功能时间（值）{
//1-转换为秒：
设秒=（值/1000）.toFixed（2）；
//2-提取时间：
设小时=parseInt（秒/3600）；//1小时内3600秒
秒=秒%3600；//提取小时后剩余的秒数
//3-摘录分钟：
让分钟=parseInt（秒/60）；//1分钟内60秒
//4-仅保留未提取到分钟的秒数：
秒=（秒%60）.toFixed（2）；
返回（[hours+”：“+minutes+”：“+seconds]）；
}
函数testTemplateErrors（测试）{
返回`
${test.Folder}
${test.test\u Name}
${test.Running}
${time（test.Run\u time）}
${result（test.Passed+test.Failed）}
`
}
函数testTemplateResults（测试）{
返回`
${test.Folder}
${test.test\u Name}
${test.Running}
${time（test.Run\u time）}
${result（test.Passed+test.Failed）}
`
}
if（myJsonString&&myJsonString.length）
{
document.getElementById（'TestResults'）。innerHTML=`
回归测试（${myJsonString.length}测试已运行）
结果文件夹名称
结果测试名称
结果运行
结果运行时间
结果
${myJsonString.map（testTemplateResults.join（“”）}
`
}
if（myJsonStringError&&myJsonStringError.length）
{
document.getElementById（'ErrorResults'）。innerHTML=`
错误结果（${myJsonStringError.length}发生错误）
错误文件夹名
错误测试名称
运行错误
错误运行时
误差结果
${myJsonStringError.map（testTemplateErrors）.join（“”）}
`
}
requirefetchXMLHttpRequestfetchfetch("/url/to/the/resource")
.then(response => {
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
return response.json();
})
.then(data => {
// ...use the data here, it's been parsed...
})
.catch(error => {
// Something went wrong, handle/report it
});
。好的const myFetch = (...args) => fetch(...args).then(response => {
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
});
myFetch("/url/to/the/resource")
.then(response => response.json())
.then(data => {
// ...use the data here, it's been parsed...
})
.catch(error => {
// Something went wrong, handle/report it
});
Promise.allPromise.all([
myFetch("../../ResultsArray/ResultsArray.json").then(response => response.json()),
myFetch("../../ResultsArray/ErrorArray.json").then(response => response.json())
])
.then(([resultsArray, errorArray]) => {
// ...use `resultsArray` and `errorArray` here...
})
.catch(error => {
// Handle/report error
});
fetchXMLHttpRequestlet myJsonString;
let myJsonStringError;
fetch("../../ResultsArray/ResultsArray.json")
.then(response => {
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
return response.json();
})
.then(data => {
myJsonString = data;
console.log(myJsonString);
})
.catch(error => {
console.log('Results.json could not be found');
});
fetch("../../ResultsArray/ErrorArray.json")
.then(response => {
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
return response.json();
})
.then(data => {
myJsonStringError = data;
console.log(myJsonStringError);
})
.catch(error => {
console.log('Error.json could not be found');
});
当我更改index.js文件以显示我得到的更改时，可能会重复“加载资源失败：服务器响应状态为404（未找到）”。即使它们在指定的位置。@Daniel-如果您得到的是404，则URL是错误的。我猜你错过了一个文件扩展名（
.json.jsrequire.js获取（../../ResultsArray/ErrorArray.json”）。然后（response=>{if（！response.Ok）{抛出新错误（“HTTP错误：+response.status）；}返回response.json（）；}）。然后（数据=>{myJsonString=data；}）。捕获（错误=>{console.log（'Error.json找不到'）；}）；