如何顯示來自 NODEJS 中的 Multiple 文件的 JSON 數據

Question

過去 3 天我一直在解決這個問題，我正在創建一個簡單的應用程序，它在 NODEJS 中顯示語言及其主題以及該特定語言的最新版本。 所以我創建了 3 個單獨的 JSON 文件 1.對於語言 2.對於他們的主題 3.對於最新版本。
我為這 3 個文件和一個簡單的 HTML 頁面創建了 api，我可以在其中顯示數據，所以這里是代碼。 有人可以指導我我該怎么做.....

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

版本文件

{
    "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 鏈接：鏈接謝謝。

Answer 1

因此，您現在需要的是從前端的 API 中獲取數據。 您只需要設置一種方法來執行 HTTP 請求。 在您的正文中，添加一個<script>標記作為最后一個元素，並在其中插入您的邏輯以從您的 API 獲取數據。

有大量的庫和方法可以從 Web 獲取數據，例如 axios 或 jQuery 的方法。 由於您的項目是一個非常簡單的項目，因此您可以只使用本機項目：使用具有 Promise 支持的Fetch API來獲取數據並將它們添加到 DOM。

如果您打算支持較舊的瀏覽器，則應該查看XMLHTTPRequest 。

無論如何：查看您的 Node.js 代碼，您正在用不同的需求覆蓋可變語言。 通過這樣做，您不會合並所有 JSON 對象。 如果您想使用一個對象來包含所有對象，請使用Object.assign 。

如何顯示來自 NODEJS 中的 Multiple 文件的 JSON 數據

問題描述

1 個解決方案

解決方案1
1 2020-03-24 14:51:49

如何顯示來自 NODEJS 中的 Multiple 文件的 JSON 數據

問題描述

1 個解決方案

解決方案1 1 2020-03-24 14:51:49

解決方案1
1 2020-03-24 14:51:49