Create Divs to hold each part of the external JSON

Question

So I've put together the basics to draw from externally hosted JSON and display it like this:

The format of JSON is as follows:

{
    "title": "National bullets",
    "source": "Dataloft",
    "data": {
        "Economy": [
            "The UK economy held steady in February as the impact of strike action offset a rise in construction activity. The economy grew by 0.1% in the three months to February, according to the ONS report.",
            "As of March, inflation was 10.1%, down 0.3% from February. Food prices continue to rise, while fuel prices have eased. Inflation is expected to fall in 2023.",
            "The Bank of England raised the benchmark interest rate to 4.25%, the highest level in 14 years, and rates are expected to peak at 4.5% this year. The next MPC meeting will be held on May 11."
        ],
        "Transactions": [
            "According to data from Rightmove, the number of sales agreements reached in March 2023 was only 1% less than in March 2019. This is the first time since September 2022 that the number of sales agreements has returned to pre-pandemic levels.",
            "Over the next 12 months, agents with a net balance expect sales growth, which is the first time since March 2022 that the RICS indicator has turned positive. Agents expect sales to remain under pressure over the next three months.",
            "According to HMRC's report, 90,340 transactions took place in February 2023, down 18% on 2022 and down 7% on the so-called 'normal' market in 2019."
        ],
        "House prices": [
            "According to the latest official forecasts from the Office for Budget Responsibility, prices in the housing market are expected to fall by 6.8% in 2023/24, compared with price growth of more than 19% in 2021-22.",
            "The asking price to achieve the sale at a discount of 4.5% is the highest in 5 years (Zoopla) and many potential sellers in the current market are being overly optimistic in their pricing.",
            "The average house price in January 2021 was £288,074, down 1.1% on the previous month but up 6.3% on the same period a year ago (UK HPI, ONS)."
        ],
        "Demand": [
            "Buyer demand for properties has increased significantly since December. According to Propertymark data, each agent registered 94 potential buyers in February 2022, compared with 70 in January and 39 in December." ,
            "The number of mortgage loan approvals in February 2022 was 43,536, 34% below the pre-pandemic (2015-2019) average, but 10% higher than January. Pre-pandemic February approvals were typically slightly lower than January .",
            "According to the latest RICS Residential Market Survey, 40% of respondents said they are seeing increased interest in more energy-efficient homes, and 61% said the value of energy-efficient homes remains stable under current market conditions."
        ],
        "Development": [
            "Government plans require all homes sold to have a Class C energy performance certificate by 2033, with no new homes built using gas boilers from 2025. The proposals are part of the UK government's Zero Emissions Lookback programme.",
            "While overall construction activity increased in March, activity in the housing sector fell, with respondents citing fewer tender opportunities due to rising costs (IHS Markit).",
            "According to data released by the DLUHC, more than 260,000 new homes were built in 2022, an increase of 3.3% over 2022. More than 68,000 new homes were completed in the last quarter, an increase of 8.9% year-on-year."
        ],
        "Investment/lettings": [
            "Demand for rental properties is at its highest level in five months, according to the latest RICS survey. Demand continues to outstrip supply and rental values ​​remain under pressure.",
            "UK private rental prices rose by 4.9% in the year to March, with many areas of England and Wales experiencing their strongest growth since records began. The ONS private housing rental price index includes existing and new rental properties. ",
            "The government is consulting on plans to require homeowners to obtain planning permission before converting their properties into short-term holiday lets, which would apply to tourist locations. Letting periods of 30-90 days may be allowed before permission is required."
        ],
        "Prime markets": [
            "According to research by the Brookings Institution, the introduction of the Overseas Entity Register has led to a significant reduction in property transactions involving offshore tax havens in the UK compared with other overseas jurisdictions.",
            "Supply in London's high-end rental market has fallen sharply. According to Knight Frank, rental orders in the second half of the month were down 21% on the first and a half, and then fell by 12% in the following two weeks.",
            "The PCL sales record for the first quarter of this year was 21% lower than for the first quarter of 2022 and down 22% from the previous quarter. However, the sales record for the first quarter of 2023 was lower than any first quarter from 2017 to 2020 More (JLL)."
        ]
    }
}

The script I use to draw the JSON data and insert it into HTML is as follows:

<code>let dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJ IgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--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 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

Try removing the extra loop: 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>