How to display json data inside an html page

Question

So I have the following JSON page with all sorts of data in this format

    "example1": {     
        "Name": Windsor,
        "rate": "70%",
        "tuition": "$2",
        "inttuition": "The National Capital Region, the Outaouais, and Eastern Ontario share a rich heritage and a fascinating history.",
   },

I'd like it to be displayed in this HTML code:

<div class="row">
  <div class="column">
          <p>Acceptance Rate:<br> "data from "rate" in "example1" set." </p>
  </div>

  <div class="column">
    <p>Average Tuition:<br> "data from "tuition" in "example1" set." </p>
  </div>
  <div class="column">
    <p>Average International Tuition:<br> "data from "inttuition" in "example1" set."  </p>
  </div>
</div>

Obviously I'd like to repeat with more data sets of "example2", "example3"..... on different pages.

Any tips on how to do this? Or any suggestions on a better way to do this. (I'm using a pretty flexible CMS called Grav to render the code.)

Answer 1

Try this,

 var data = [{ "example1": { "Name": "Emmanuel", "rate": "90%", "tuition": "$20", "inttuition": "The National Capital Region, the Outaouais, and Eastern Ontario share a rich heritage and a fascinating history.", }, "example2": { "Name": "Windsor", "rate": "90%", "tuition": "$2", "inttuition": "The National Capital Region, the Outaouais, and Eastern Ontario share a rich heritage and a fascinating history.", }, "example3": { "Name": "BillGates", "rate": "100%", "tuition": "$2000", "inttuition": "The National Capital Region, the Outaouais, and Eastern Ontario share a rich heritage and a fascinating history.", }, }]; var htmlText = data.map(function(a){ return ` <div class="row"> <div class="column"> <p class="p-name"> Name: ${a.example1.Name} <br/ > Rate: ${a.example1.rate}</p> </div> <div class="column"> <p class="p-name"> Name: ${a.example2.Name} <br/ > Rate: ${a.example2.rate}</p> </div> <div class="column"> <p class="p-name"> Name: ${a.example3.Name} <br/ > Rate: ${a.example3.rate}</p> </div> </div> `; }); $('.container').append(htmlText);

 .container { margin-bottom: 5px; padding: 5px; }.container p { margin: 5px; padding: 14px; background-color: #eeeeee; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"></div>