Display Heading and Description of a HTML template reading from JSON












0














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 '18 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 '18 at 8:43










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


















0














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 '18 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 '18 at 8:43










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
















0












0








0







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 '18 at 8:36









LS2

74212




74212












  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 '18 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 '18 at 8:43










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




















  • So what backend language do you want to use for this? php?
    – RamonRobben
    Nov 21 '18 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 '18 at 8:43










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


















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




So what backend language do you want to use for this? php?
– RamonRobben
Nov 21 '18 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 '18 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 '18 at 8:43












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






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














1 Answer
1






active

oldest

votes


















2














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 '18 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',
autoActivateHeartbeat: false,
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









2














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 '18 at 9:20
















2














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 '18 at 9:20














2












2








2






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 '18 at 9:21

























answered Nov 21 '18 at 9:10









RamonRobben

328316




328316












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


















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
















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




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


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




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

Wiesbaden

Marschland

Dieringhausen