title: How to send the content in the json file to the frontend?
body: <p>I need some guidance as to how can I display my json file inside a popup in my frontend. I have written some code in order to read the json file but I don't know how to send it now to the frontend or/and how to call it from the html file.</p>
  
  <p>Here is code for the frontend:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;its4land&lt;/title&gt;
  
      &lt;style&gt;
  
      .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 ;}
  }
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="popup"  style="width: 1000px; height: 600px;"&gt;
               &lt;img src="Boma_1_2/F16_20170316141116392_0001.jpg" onclick="myFunction(event)" alt="Boma" style="width:1000px;height:600px;"&gt;
               &lt;span class="popuptext" id="myPopup"&gt;Vegetation&lt;/span&gt;
          &lt;/div&gt;
  
      &lt;script&gt;
  
  function myFunction(e) {
  
         var x=e.pageX;   
         var y=e.pageY;   
         $("#myPopup").css({ left: x });
         $("#myPopup").css({ top: y });
         $("#myPopup").show();
  
      }
  &lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>Here is my json file:</p>
  
  <pre><code>{
  "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":[]
          }
          ]
      }
  ]
  }
  </code></pre>
  
  <p>Here is my index.js file:</p>
  
  <pre><code>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");
  });
  </code></pre>