How to read JSON file and add the values to HTML page
Question
EDIT:
I just need a simple way to read the json file in the html page, can it be possible without making this complicated? I should be able to have key reference anywhere in the html page without any limitations.
END
I have html page that hosted on the heroku app and I'm trying to read the json file and display the values of json file to the html page, how would I do that?
Here is what I have tried so far.
My student JSON file:
{
name: 'John Doe',
car: 'BMW X5'
}
My HTML page:
<html>
<header>
const fs = require('fs');
let rawdata = fs.readFileSync('student.json');
let student = JSON.parse(rawdata);
console.log(student);
console.log('my Name: ' + student.name);
console.log('my Name: ' + student.car);
</header>
<body>
<h1>My Name is: <%=name%> </h1>
<p>My Car is: <%=car%></p>
</body>
</html>
2 answers
solution1
0 2019-11-04 21:11:35
There are various ways to load a local JSON file into your web page, but only a few preferred ways to present your loaded data.
- Fetching local JSON
- Load local JSON file into variable
- How to read an external local JSON file in JavaScript?
Once you load your data, it is wise to either utilize data-binding or templates to present your data.
Data-binding with knockout
// Data from load var student = { name: 'John Doe', car: 'BMW X5' }; var StudentViewModel = function(studentData) { this.name = ko.observable(studentData.name); this.car = ko.observable(studentData.car); } ko.applyBindings(new StudentViewModel(student));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1>My Name is: <span data-bind="text: name"></span></h1> <p>My Car is: <span data-bind="text: car"></span></p>
Templates
// Data from load var student = { name: 'John Doe', car: 'BMW X5' }; window.addEventListener('DOMContentLoaded', (event) => { let templateHtml = document.getElementById('student-template').innerHTML; let StudentTemplate = Handlebars.compile(templateHtml); document.body.insertAdjacentHTML('beforeend', StudentTemplate(student)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script> <script id="student-template" type="text/x-handlebars-template"> <h1>My Name is: {{name}}</span></h1> <p>My Car is: {{car}}</span></p> </script>
solution2
-1 2019-11-04 20:23:41
You have to add script tags.
<html>
<header>
<script>
const fs = require('fs');
let rawdata = fs.readFileSync('student.json');
let student = JSON.parse(rawdata);
console.log(student);
console.log('my Name: ' + student.name);
console.log('my Name: ' + student.car);
document.getElementById("print-name").innerHTML = `My Name is: ${student.name}`;
document.getElementById("print-car").innerHTML = `My Name is: ${student.car}`;
</script>
</header>
<body>
<h1 id="print-name"></h1>
<p id="print-car"></p>
</body>
</html>
solution3
-2 2019-11-04 20:27:53
There are 2 approaches to displaying data from a server to the client:
1) You can change your client JS code to make an http request to fetch the JSON and then dynamically update the HTML. Pro: simple, Con: additional http request.
2) Or you can edit the HTML on the server. Pro: avoids http request, Con: slightly more complex.
Server Node code:
const http = require('http');
const myJson = require('student.json', 'utf-8');
let myHtml = require('fs').readFileSync('index.html', 'utf-8');
myHtml = myHtml.replace(/<%=(\w*)%>/, (_, key) => myJson[key]);
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(myHtml);
}).listen(8080);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.