如何在 html 頁面內顯示 json 數據

Question

所以我有以下 JSON 頁面，其中包含這種格式的各種數據

    "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.",
   },

我希望它顯示在此 HTML 代碼中：

<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>

顯然，我想在不同的頁面上重復更多的“example2”、“example3”......

關於如何做到這一點的任何提示？ 或任何有關更好方法的建議。 （我正在使用一個非常靈活的名為 Grav 的 CMS 來呈現代碼。）

Answer 1

嘗試這個，

 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>