Javascript: Node.js
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
Following example will read file content of data.json
file and convert it into object. __dirname
is root folder of your project.
//index.js
const fs = require('fs'); //filesystem module
const json = fs.readFileSync(`${__dirname}/data/data.json`, 'utf-8');
const laptopData = JSON.parse(json);
console.log(laptopData);
//data/data.json
[
{
"id": "0",
"productName": "Huawei MateBook X Pro",
"image": "huawei-matebook-pro.jpg",
"cpu": "Intel Core i7, 8th generation",
"ram": "8GB",
"storage": "512 GB SSD",
"screen": "13.9-inch, 3K (3,000 x 2,080)",
"price": "1499",
"description": "The Huawei MateBook X Pro is our pick for the best laptop money can buy in 2018. This is a gorgeously-designed laptop with a stunning screen (albeit with a rather odd aspect ratio), and it comes packed with cutting edge components that allows it to perform brilliantly, and a battery life that runs rings around many of its rivals. It also has a very competitive price, giving you features, design and performance for quite a bit less money."
}
]
Final example with created server and routing
//index.js
const fs = require('fs');
const http = require('http');
const url = require('url');
const json = fs.readFileSync(`${__dirname}/data/data.json`, 'utf-8');
const laptopData = JSON.parse(json);
const server = http.createServer((req, res) => {
const pathName = url.parse(req.url, true).pathname;
const id = url.parse(req.url, true).query.id;
// PRODUCTS OVERVIEW
if (pathName === '/products' || pathName === '/') {
res.writeHead(200, { 'Content-type': 'text/html'});
fs.readFile(`${__dirname}/templates/template-overview.html`, 'utf-8', (err, data) => {
let overviewOutput = data;
fs.readFile(`${__dirname}/templates/template-card.html`, 'utf-8', (err, data) => {
const cardsOutput = laptopData.map(el => replaceTemplate(data, el)).join('');
overviewOutput = overviewOutput.replace('%CARDS%', cardsOutput);
res.end(overviewOutput);
});
});
}
// LAPTOP DETAIL
else if (pathName === '/laptop' && id < laptopData.length) {
res.writeHead(200, { 'Content-type': 'text/html'});
fs.readFile(`${__dirname}/templates/template-laptop.html`, 'utf-8', (err, data) => {
const laptop = laptopData[id];
const output = replaceTemplate(data, laptop);
res.end(output);
});
}
// IMAGES
else if ((/\.(jpg|jpeg|png|gif)$/i).test(pathName)) {
fs.readFile(`${__dirname}/data/img${pathName}`, (err, data) => {
res.writeHead(200, { 'Content-type': 'image/jpg'});
res.end(data);
});
}
// URL NOT FOUND
else {
res.writeHead(404, { 'Content-type': 'text/html'});
res.end('URL was not found on the server!');
}
});
server.listen(1337, '127.0.0.1', () => {
console.log('Listening for requests now');
});
function replaceTemplate(originalHtml, laptop) {
let output = originalHtml.replace(/%PRODUCTNAME%/g, laptop.productName);
output = output.replace(/%IMAGE%/g, laptop.image);
output = output.replace(/%PRICE%/g, laptop.price);
output = output.replace(/%SCREEN%/g, laptop.screen);
output = output.replace(/%CPU%/g, laptop.cpu);
output = output.replace(/%STORAGE%/g, laptop.storage);
output = output.replace(/%RAM%/g, laptop.ram);
output = output.replace(/%DESCRIPTION%/g, laptop.description);
output = output.replace(/%ID%/g, laptop.id);
return output;
}