創建Divs以容納外部JSON的每個部分
P粉502608799
2023-08-20 21:33:12
<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>
嘗試刪除額外的循環:
for (const div in payload.data)
?