I am excepting an outlook like this: Image relating to output
What I want to know is how can I create this output without having to write <p> again and again using pure JavaScript and JSON, without any JS library.
The JSON data looks like this:
[{"id":1,"first_name":"David","food":"Pizza","age":"24"},
{"id":2,"first_name":"Jack","food":"Hamburger","age":"22"},
{"id":3,"first_name":"Harrison","food":"Sweets","age":"8"},.....
My HTML body looks like this
<body>
</div class="content">
<center>
<p><B>People and their Foods</B></p>
</center>
</div>
</body>
Please help me, as I am new to this code world.
you can loop through your data and dynamically create elements with each iteration and assign them to the main/root div.
// javascript
// pure javascript
// function to render data
function renderData (data) {
var root = document.getElementById("root");
for(var i =0; i<data.length; i++){
// here you can also create inner loop as well. but following is easier for you.
var div = document.createElement("div");
var para1 = document.createElement("P");
para1.innerText = "name:" + data[i].first_name;
div.appendChild(para1);
var para2 = document.createElement("P");
para2.innerText = "food:" + data[i].food;
div.appendChild(para2);
var para3 = document.createElement("P");
para3.innerText = "age:" + data[i].age;
div.appendChild(para3);
root.appendChild(div);
}
}
// load your json data and then call renderData function
var httpRequest = new XMLHttpRequest(); // asynchronous request
httpRequest.open("GET", "local/path/file.json", true);
httpRequest.send();
httpRequest.addEventListener("readystatechange", function() {
if (this.readyState === this.DONE) {
// when the request has completed
var object = JSON.parse(this.response);
// assuming that in json file data is an attribute
renderData(object.data);
}
});<!-- html part -->
<body>
<div class="content">
<center>
<p><b>People and their Foods</b></p>
</center>
<!-- == i have added one div with id root == -->
<div id="root"></div>
</div>
</body>Try like following snippet:
const json = [{"id":1,"first_name":"David","food":"Pizza","age":"24"},
{"id":2,"first_name":"Jack","food":"Hamburger","age":"22"},
{"id":3,"first_name":"Harrison","food":"Sweets","age":"8"},]
const content = document.querySelector('.content')
json.forEach(j => {
let div = document.createElement('div')
div.id = j.id
div.style = "margin-bottom: 2em;"
content.appendChild(div)
const divid = content.querySelector(`#${CSS.escape(j.id)}`)
for(let key in j) {
if(key !== 'id') {
let p = document.createElement('p')
let title = ''
key === 'first_name' ? title = 'name' : title = key
p.innerText = title.charAt(0).toUpperCase() + title.slice(1) + ': ' + j[key]
divid.appendChild(p)
}
}
})<body>
<div class="content">
<h3>People and their Foods</h3>
</div>
</body>