創建Divs以容納外部JSON的每個部分
<p>所以我已經整理了基本的內容，以便從外部託管的JSON中繪製並顯示如下：</p>
<p>JSON的樣式如下：</p>
<pre class="brush:php;toolbar:false;">{
"title": "National bullets",
"source": "Dataloft",
"data": {
"Economy": [
"英國經濟在2月保持穩定，罷工行動的影響抵消了建築活動的增長。根據ONS的報告，截至2月份的三個月內，經濟增長了0.1%。",
「截至3月份，通膨率為10.1%，較2月份下降了0.3%。食品價格持續上漲，而燃料價格有所回落。通膨率預計將在2023年下降。",
「英格蘭銀行將基準利率提高到4.25%，創下14年來的最高水平，預計今年的利率將在4.5%達到頂峰。MPC下次會議將於5月11日舉行。"
],
"Transactions": [
「根據Rightmove的數據，2023年3月達成的銷售協議數量僅比2019年3月少1%，這是自2022年9月以來銷售協議數量首次回到疫情前水準。",
"在未來12個月內，有淨平衡的中介預計銷售成長，這是自2022年3月以來RICS指標首次呈正值。中介預計未來三個月銷售量將繼續承壓。",
"根據HMRC的報告，2023年2月發生的交易量為90,340筆，比2022年下降了18%，比2019年所謂的「正常」市場下降了7%。"
],
"House prices": [
"根據預算責任辦公室最新的官方預測，預計2023/24年住房市場的價格將下降6.8%，而2021-22年的價格增長超過19%。",
「以4.5%的折扣來實現銷售的要價是5年來最高的（Zoopla），當前市場上許多潛在賣家在定價時過於樂觀。",
"2021年1月的平均房價為288,074英鎊，較上個月下降1.1%，但較一年前同期上漲6.3%（UK HPI，ONS）。"
],
"Demand": [
"自12月以來，購屋者對房產的需求大幅增加。根據Propertymark的數據，2022年2月，每家中介註冊了94個潛在買家，而1月份為70個，12月份為39個。" ,
"2022年2月的抵押貸款核准數量為43,536筆，比疫情前（2015-2019年）平均水準低34%，但比1月份高10%。疫情前的2月份核准數量通常略低於1月份。",
"根據最新的RICS住宅市場調查，40%的受訪者表示他們看到了更多對更節能的房屋的興趣，61%的受訪者表示在當前市場條件下，節能房屋的價值保持穩定。"
],
"Development": [
"政府計劃要求所有出售的住房在2033年之前必須具有C級的能源績效證書，從2025年開始不再建造使用燃氣鍋爐的新房。這些提案是英國政府“零排放回顧”計劃的一部分。",
"儘管3月份整體建築活動有所增加，但住房部門的活動減少，受訪者指出由於成本上升，招標機會減少（IHS Markit）。",
"根據DLUHC發布的數據，2022年新建了超過26萬套住房，比2022年增長了3.3%。最後一個季度完成了超過6.8萬套新住房，同比增長8.9%。"
],
"Investment/lettings": [
"根據RICS的最新調查，租賃物業的需求達到了五個月來的最高水平。需求繼續超過供應，租金價值繼續承壓。",
「英國私人租金價格在截至3月的一年內上漲了4.9%，英格蘭和威爾斯的許多地區經歷了自有記錄以來最強勁的增長。ONS的私人房屋租金價格指數包括現有和新的出租物業。 ",
「政府正在就計劃徵求意見，要求房主在將房產轉為短期度假出租物之前獲得規劃許可，該計劃適用於旅遊地點。在需要許可之前，可能允許租賃期為30-90天。"
],
"Prime markets": [
"根據布魯金斯學會的研究，引入海外實體登記表導致英國與其他海外地區相比，涉及離岸避稅天堂的房地產交易大幅減少。",
"倫敦高端租賃市場的供應急劇下降。根據Knight Frank的數據，第二個半月的租賃指令比第一個半月下降了21%，而後兩週下降了12%。",
"今年第一季PCL的銷售記錄比2022年第一季少了21%，比上一季下降了22%。然而，2023年第一季的銷售記錄比2017年至2020年的任何第一季都要多（JLL）。"
]
}
}</pre>
<p>我用來繪製JSON資料並將其插入HTML中的腳本如下：</p>
<pre><code>let dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhL1INCN IgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d989db230a66efadf/V8UDrS9mIAVkNJcgBI3e330national
fetch(dataloft_national_bullets_url)
.then((response) => response.json())
.then((payload) => {
let container = document.getElementById("national_bullets_target_container");
for (const div in payload.data) {
let data = document.createElement('div');
data.appendChild(document.createTextNode(div));
container.appendChild(data);
for (const chapter in payload.data) {
let header = document.createElement('h1');
header.appendChild(document.createTextNode(chapter));
container.appendChild(header);
for (const paragraph in payload.data[chapter]) {
let para = document.createElement('li');
para.appendChild(document.createTextNode(payload.data[chapter][paragraph]));
container.appendChild(para);
}</code></pre>
