創建Divs以容納外部JSON的每個部分
P粉502608799
P粉502608799 2023-08-20 21:33:12
0
1
520
<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>
P粉502608799
P粉502608799

全部回覆(1)
P粉956441054

嘗試刪除額外的循環:for (const div in payload.data)

let dataloft_national_bullets_url =
  'https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgBI3e3Q/national_bullets';

fetch(dataloft_national_bullets_url)
  .then((response) => response.json())
  .then((payload) => {
    let container = document.getElementById(
      'national_bullets_target_container'
    );

    for (const chapter in payload.data) {
      const data = document.createElement('div');
      data.appendChild(document.createTextNode(chapter));

      let header = document.createElement('h1');
      header.appendChild(document.createTextNode(chapter));
      data.appendChild(header);

      for (const paragraph in payload.data[chapter]) {
        let para = document.createElement('li');
        para.appendChild(
          document.createTextNode(payload.data[chapter][paragraph])
        );
        data.appendChild(para);
      }

      container.appendChild(data);
    }
  });
<div id="national_bullets_target_container"></div>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板