如何显示JSON数据来自NODEJS中的Multiple文件

我在过去的三天里一直处于这个问题中，我正在创建一个简单的应用程序，它显示语言及其主题，以及NODEJS中该特定语言的最新版本。所以我创建了3个独立的JSON文件1.对于语言2。针对他们的主题3.针对最新版本
我为这3个文件创建了api，并创建了一个简单的HTML页面，在其中我可以显示数据，所以这里是代码。有人能指导我怎么做吗。。。。。

var express = require('express')
var app = express()

var fs = require('fs')
var path = require('path')
var bodyParser = require('body-parser')
var Languages = require('./public/Languages.json')
var Languages = require('./public/LVersion.json')
var Languages = require('./public/subtopics.json')

app.use(bodyParser.urlencoded({extended:true}));

// Defining HTML file
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/index.html')
})
// Send Responce to user
app.post('/',(req,res)=>{
let v1 = String(req.body.langu)
res.send(v1+' is your Data')
})

var url1 = 'http://localhost:3000/api/languages'
var url2 = 'http://localhost:3000/api/Lversion'
var url3 = 'http://localhost:3000/api/subtopicp'

//Api for getting Languages
app.get('/api/languages',(req,res)=>{
res.sendFile(__dirname+'/public/languages.json')
})
//Api for getting Latest Version
app.get('/api/latestv',(req,res)=>{
res.sendFile(__dirname+'/public/Lversion.json')
})
//Api for getting Sub Topics
app.get('/api/subtopicp',(req,res)=>{
res.sendFile(__dirname+'/public/subtopics.json')
})
//Read and Parse Languages
let lan = fs.readFileSync('./public/Languages.json')
let lang = JSON.parse(lan)
//Read and parse Latest Version
let LV = fs.readFileSync('./public/LVersion.json')
let LVer = JSON.parse(LV)
//Read and parse subtopics
let subt = fs.readFileSync('./public/subtopics.json')
let subtopic = JSON.parse(subt)


var port = 3000
app.listen(port,(req,res)=>{
console.log('App is Listen on localhost: ' +port )
})

这是HTML代码。我不专注于UI，我只想在浏览器中显示数据。

<html>
<head>
<title>Getting Data From json</title>
</head>
<body>
<h1>Here You Get Latest Technologes , Subtopics and Latest Versions</h1>
<form method="POST">
<h3>OR Select</h3>
<!-- Drop Down -->
<select id="cars" name="Langu">
<option value="C">C</option>
<option value="CPlusPLus">C++</option>
<option value="JAVA">JAVA</option>
<option value="NODE">NODE</option>
</select>
<br><br>

<button>Submit</button>
</form>
</body>
</html>

Json文件Languages.json

{
"Lan": [ "C", "C++",  "Java","Python"]
}

LVersion.json

{
"C":{
"LV" : "C 18"
},
"java":{
"LV": "Java SE 13.0.1"
},
"Python":{
"LV": "Python 3.8"
}
}

主题.json

{
"C": {
"topics": [
"Data Types",
"XML",
"Variables",
"Loops",
"And More"
]
},
"C++" : {
"topics": [
"Constants",
"Oprators",
"Input/Output",
"Arrays",
"Classes",
"Special Members"
]
},
"Java" : {
"topics": [
"Constants",
"Oprators",
"Input/Output",
"Arrays",
"Classes",
"Special Members"
]
},
"Python" : {
"topics": [
"Exceptions",
"Lists",
"Functions",
"Modules",
"Classes",
"Files I/O"
]
}

}

在这里，我给出了我能给出的所有代码和信息。这个项目的GitHub链接，如果你想要完整的源代码和一些解决方案：链接非常感谢。

因此，您现在需要的是从前端的API中获取数据。您只需要设置一种执行HTTP请求的方法。在您的主体中，添加一个<script>标记作为最后一个元素，并在其中插入您的逻辑以从API获取数据。

有大量的库和从web获取数据的方法，比如axios或jQuery的方法。由于您的项目非常简单，因此您只需使用原生项目：使用Fetch API(它支持Promise(来获取数据并将其添加到DOM中。

如果您计划支持较旧的浏览器，您应该考虑XMLHTTPRequest。

无论如何：查看Node.js代码，您正在用tre不同的需求覆盖变量Languages。这样做并不是在合并所有的JSON对象。如果要使用一个对象来包含所有对象，请使用Object.assign。

相关内容

最新更新

热门标签：