創建Divs以容納外部JSON的每個部分

Question

所以我已經整理了基本的內容，以便從外部託管的JSON中繪製並顯示如下：

JSON的樣式如下：

{
    "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）。"
        ]
    }
}

我用來繪製JSON資料並將其插入HTML中的腳本如下：

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

Answer 1

嘗試刪除額外的循環：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>