Publishing JSON data to HTML using JavaScript-CodePudding

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 >
<center>
<p><B>People and their Foods</B></p>
</center>
</div>
</body>

Please help me, as I am new to this code world.

CodePudding user response：

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>

CodePudding user response：

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>