Question

我需要一些指导，如何在我的前端弹出窗口中显示我的json文件。我已经编写了一些代码来读取json文件，但我不知道如何将它现在发送到前端或/和如何从html文件中调用它。

以下是前端的代码：

<!doctype html>
<html lang="en">
    <head>
        <title>its4land</title>

    <style>

    .popup {
    display: inline-block;
    cursor: pointer;
}


 .popuptext
                {
                    display: none;
                    color: black;
                    position: absolute;
                    top: 100px;
                    left: 400px;
                    padding: 60px;
                    border: solid 1px #ddd;
                    border-radius: 20px;
                    background: #F0E68C;
                    width: 10%;
                }

        .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}


@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
    </style>

    </head>

    <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"  style="width: 1000px; height: 600px;">
             <img src="Boma_1_2/F16_20170316141116392_0001.jpg" onclick="myFunction(event)" alt="Boma" style="width:1000px;height:600px;">
             <span class="popuptext" id="myPopup">Vegetation</span>
        </div>

    <script>

function myFunction(e) {

       var x=e.pageX;   
       var y=e.pageY;   
       $("#myPopup").css({ left: x });
       $("#myPopup").css({ top: y });
       $("#myPopup").show();

    }
</script>
    </body>

    </html>

这是我的json文件：

{
"name":"vegetation",
"id":2,
"children":[
    {
        "name":"forest area",
        "id":3,
        "children":[
        {
            "name":"kakamega forest",
            "id":4,
            "children":[]
        },
        {
            "name":"cherangam hills forest",
            "id":5,
            "children":[]
        },
        {
            "name":"karura forest",
            "id":6,
            "children":[]
        },
        {
            "name":"loita forest",
            "id":7,
            "children":[]
        }
        ]
    },
    {
        "name":"plantation",
        "id":8,
        "children":[
        {
            "name":"sonag tree",
            "id":9,
            "children":[]
        },
        {
            "name":"acacia tree",
            "id":10,
            "children":[]
        },
        {
            "name":"kaffirboom coral tree",
            "id":11,
            "children":[]
        }
        ]
    }
]
}

这是我的index.js文件：

var express = require('express');
var request = require('request');
var fs = require('fs');
var path = require('path');

var bodyParser = require('body-parser');

var app = express();

fs.readFile('new_veg.json', 'utf8', function (err, data) {
    if (err) throw err; 
    var obj = JSON.parse(data);
});


app.listen(8080, function() {
    console.log("server running");
});

Answer 1

这将从前端的快递app返回任何json数据。

const yourJson = require("new_veg.json");

app.get("/getMyJSON", (req, res) => {
    res.json(yourJson);
});

例如，您需要使用ajax调用此路由。

jQuery.getJSON("/getMyJSON", (data) => {
    console.log(data);
});

剩下要做的就是将检索到的数据粘贴到您需要的任何DOM元素中。希望它会有所帮助。

如何将json文件中的内容发送到前端？

1 个答案: