Display Heading and Description of a HTML template reading from JSON











up vote
0
down vote

favorite












I am working on a simple webpage. I have a following sample json file and an HTML template



data.json



{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}


index.html



<div class="name"></div>
<div class="address"></div>


So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?










share|improve this question






















  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 at 8:41










  • Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
    – Stuart Grant
    Nov 21 at 8:43










  • Currently am not using any backend, its a simple/basic HTML template.
    – LS2
    Nov 21 at 8:45

















up vote
0
down vote

favorite












I am working on a simple webpage. I have a following sample json file and an HTML template



data.json



{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}


index.html



<div class="name"></div>
<div class="address"></div>


So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?










share|improve this question






















  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 at 8:41










  • Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
    – Stuart Grant
    Nov 21 at 8:43










  • Currently am not using any backend, its a simple/basic HTML template.
    – LS2
    Nov 21 at 8:45















up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am working on a simple webpage. I have a following sample json file and an HTML template



data.json



{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}


index.html



<div class="name"></div>
<div class="address"></div>


So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?










share|improve this question













I am working on a simple webpage. I have a following sample json file and an HTML template



data.json



{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}


index.html



<div class="name"></div>
<div class="address"></div>


So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?







html json






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 at 8:36









LS2

74212




74212












  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 at 8:41










  • Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
    – Stuart Grant
    Nov 21 at 8:43










  • Currently am not using any backend, its a simple/basic HTML template.
    – LS2
    Nov 21 at 8:45




















  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 at 8:41










  • Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
    – Stuart Grant
    Nov 21 at 8:43










  • Currently am not using any backend, its a simple/basic HTML template.
    – LS2
    Nov 21 at 8:45


















So what backend language do you want to use for this? php?
– RamonRobben
Nov 21 at 8:41




So what backend language do you want to use for this? php?
– RamonRobben
Nov 21 at 8:41












Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
– Stuart Grant
Nov 21 at 8:43




Are you using any particular javascript library at present? If so then you will likely find examples of templating for that library. If not, then you will have to JSON.parse(jsonText) to an object and use javascript to create a dom structure to display the data.
– Stuart Grant
Nov 21 at 8:43












Currently am not using any backend, its a simple/basic HTML template.
– LS2
Nov 21 at 8:45






Currently am not using any backend, its a simple/basic HTML template.
– LS2
Nov 21 at 8:45














1 Answer
1






active

oldest

votes

















up vote
2
down vote



accepted










I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.



However there is a library out there that does something like this and its called Handlebars.



Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro



This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?



Here is an example using your html:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





If you would rather write html outside of the javascript variables you could also do it like this:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>








share|improve this answer























  • Exactly what i need. Thanks!!
    – LS2
    Nov 21 at 9:20











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408052%2fdisplay-heading-and-description-of-a-html-template-reading-from-json%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
2
down vote



accepted










I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.



However there is a library out there that does something like this and its called Handlebars.



Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro



This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?



Here is an example using your html:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





If you would rather write html outside of the javascript variables you could also do it like this:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>








share|improve this answer























  • Exactly what i need. Thanks!!
    – LS2
    Nov 21 at 9:20















up vote
2
down vote



accepted










I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.



However there is a library out there that does something like this and its called Handlebars.



Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro



This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?



Here is an example using your html:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





If you would rather write html outside of the javascript variables you could also do it like this:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>








share|improve this answer























  • Exactly what i need. Thanks!!
    – LS2
    Nov 21 at 9:20













up vote
2
down vote



accepted







up vote
2
down vote



accepted






I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.



However there is a library out there that does something like this and its called Handlebars.



Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro



This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?



Here is an example using your html:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





If you would rather write html outside of the javascript variables you could also do it like this:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>








share|improve this answer














I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.



However there is a library out there that does something like this and its called Handlebars.



Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro



This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?



Here is an example using your html:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





If you would rather write html outside of the javascript variables you could also do it like this:






<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>








<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>





<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>





<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>

<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 9:21

























answered Nov 21 at 9:10









RamonRobben

328316




328316












  • Exactly what i need. Thanks!!
    – LS2
    Nov 21 at 9:20


















  • Exactly what i need. Thanks!!
    – LS2
    Nov 21 at 9:20
















Exactly what i need. Thanks!!
– LS2
Nov 21 at 9:20




Exactly what i need. Thanks!!
– LS2
Nov 21 at 9:20


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408052%2fdisplay-heading-and-description-of-a-html-template-reading-from-json%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...