Buat Div untuk memegang setiap bahagian JSON luaran

Question

Jadi saya telah mengumpulkan asas untuk melukis daripada JSON yang dihoskan secara luaran dan memaparkannya seperti ini:

Format JSON adalah seperti berikut:

{
    "title": "Peluru kebangsaan",
    "source": "Dataloft",
    "data": {
        "Ekonomi": [
            "Ekonomi UK kekal stabil pada Februari kerana kesan tindakan mogok mengimbangi peningkatan dalam aktiviti pembinaan. Ekonomi berkembang sebanyak 0.1% dalam tempoh tiga bulan hingga Februari, menurut laporan ONS.",
            "Sehingga Mac, inflasi adalah 10.1%, turun 0.3% daripada Februari. Harga makanan terus meningkat, manakala harga bahan api telah berkurangan. Inflasi dijangka jatuh pada 2023.",
            "Bank of England menaikkan kadar faedah penanda aras kepada 4.25%, paras tertinggi dalam 14 tahun, dan kadar dijangka memuncak pada 4.5% tahun ini. Mesyuarat MPC seterusnya akan diadakan pada 11 Mei."
        ],
        "Transaksi": [
            "Menurut data daripada Rightmove, jumlah perjanjian jualan yang dicapai pada Mac 2023 hanya kurang 1% berbanding Mac 2019. Ini adalah kali pertama sejak September 2022 bahawa jumlah perjanjian jualan telah kembali ke tahap pra-pandemi.",
            "Dalam tempoh 12 bulan akan datang, ejen dengan baki bersih menjangkakan pertumbuhan jualan, yang merupakan kali pertama sejak Mac 2022 bahawa penunjuk RICS telah bertukar positif. Ejen menjangkakan jualan kekal di bawah tekanan dalam tempoh tiga bulan akan datang.",
            "Menurut laporan HMRC, 90,340 transaksi berlaku pada Februari 2023, turun 18% pada 2022 dan turun 7% pada apa yang dipanggil pasaran 'normal' pada 2019."
        ],
        "Harga rumah": [
            "Menurut ramalan rasmi terkini dari Pejabat Tanggungjawab Belanjawan, harga dalam pasaran perumahan dijangka turun sebanyak 6.8% pada 2023/24, berbanding dengan pertumbuhan harga lebih daripada 19% pada 2021-22.",
            "Harga yang diminta untuk mencapai jualan pada diskaun sebanyak 4.5% adalah yang tertinggi dalam 5 tahun (Zoopla) dan ramai penjual berpotensi dalam pasaran semasa terlalu optimistik apabila menetapkan harga.",
            "Harga purata rumah pada Januari 2021 ialah £288,074, turun 1.1% pada bulan sebelumnya tetapi naik 6.3% pada tempoh yang sama tahun lalu (UK HPI, ONS)."
        ],
        "Permintaan": [
            "Permintaan untuk hartanah telah meningkat dengan ketara sejak Disember. Menurut data Propertymark, setiap ejen mendaftarkan 94 pembeli berpotensi pada Februari 2022, berbanding 70 pada Januari dan 39 pada Disember ,
            "Bilangan kelulusan pinjaman gadai janji pada Februari 2022 ialah 43,536, 34% di bawah purata pra-pandemi (2015-2019), tetapi 10% lebih tinggi daripada Januari. Kelulusan Februari pra-pandemi biasanya lebih rendah sedikit daripada Januari .",
            "Menurut Tinjauan Pasaran Kediaman RICS terkini, 40% responden berkata mereka melihat peningkatan minat terhadap rumah yang lebih cekap tenaga, dan 61% berkata nilai rumah cekap tenaga kekal stabil di bawah keadaan pasaran semasa."
        ],
        "Pembangunan": [
            "Rancangan kerajaan memerlukan semua rumah yang dijual mempunyai sijil prestasi tenaga Kelas C menjelang 2033, tanpa rumah baharu dibina menggunakan dandang gas mulai 2025. Cadangan tersebut adalah sebahagian daripada program Tinjauan Balik Sifar Emisi kerajaan UK.",
            "Walaupun keseluruhan aktiviti pembinaan meningkat pada bulan Mac, aktiviti dalam sektor perumahan jatuh, dengan responden menyebut peluang tender yang lebih sedikit disebabkan peningkatan kos (IHS Markit)",
            “Menurut data yang dikeluarkan oleh DLUHC, lebih 260,000 rumah baharu dibina pada 2022, meningkat 3.3% berbanding 2022. Lebih 68,000 rumah baharu telah siap pada suku terakhir, peningkatan 8.9% tahun ke tahun. "
        ],
        "Pelaburan/penyewaan": [
            "Permintaan untuk hartanah sewa berada pada paras tertinggi dalam tempoh lima bulan, menurut tinjauan RICS terkini. Permintaan terus melebihi bekalan dan nilai sewa kekal di bawah tekanan.",
            "Harga sewa swasta UK meningkat sebanyak 4.9% pada tahun hingga Mac, dengan banyak kawasan di England dan Wales mengalami pertumbuhan paling kukuh sejak rekod bermula. Indeks harga sewa perumahan swasta ONS termasuk hartanah sewa sedia ada dan baharu. ",
            "Kerajaan sedang berunding mengenai rancangan untuk menghendaki pemilik rumah mendapatkan kebenaran merancang sebelum menukar harta mereka menjadi rumah percutian jangka pendek, yang akan digunakan untuk lokasi pelancongan. Tempoh penyewaan 30-90 hari mungkin dibenarkan sebelum kebenaran diperlukan."
        ],
        "Pasaran utama": [
            "Menurut penyelidikan oleh Institusi Brookings, pengenalan Daftar Entiti Luar Negara telah membawa kepada pengurangan ketara dalam urus niaga hartanah yang melibatkan kawasan perlindungan cukai luar pesisir di UK berbanding dengan bidang kuasa luar negara yang lain.",
            "Bekalan di pasaran sewa mewah London telah jatuh dengan ketara. Menurut Knight Frank, pesanan sewa pada separuh kedua bulan itu adalah 21% lebih rendah daripada pada separuh pertama, diikuti dengan penurunan 12% dalam dua minggu berikutnya. .",
            "Rekod jualan PCL pada suku pertama tahun ini adalah 21% lebih rendah berbanding suku pertama 2022 dan turun 22% daripada suku sebelumnya. Bagaimanapun, rekod jualan pada suku pertama 2023 adalah lebih rendah daripada mana-mana suku pertama daripada 2017 hingga 2020 Lagi (JLL)."
        ]
    }
}

Skrip yang saya gunakan untuk melukis data JSON dan memasukkannya ke dalam HTML adalah seperti berikut:

biarkan dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2PYGVNzM2PZGyw 7A FRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgllet/nasional; fetch(dataloft_national_bullets_url) .then((response) => response.json()) .then((payload) => { biarkan bekas = document.getElementById("national_bullets_target_container"); untuk (const div dalam payload.data) { biarkan data = document.createElement('div'); data.appendChild(document.createTextNode(div)); container.appendChild(data); untuk (bab const dalam payload.data) { biarkan pengepala = document.createElement('h1'); header.appendChild(document.createTextNode(bab)); container.appendChild(header); untuk (perenggan const dalam muatan.data[bab]) { biarkan para = document.createElement('li'); para.appendChild(document.createTextNode(payload.data[bab][perenggan])); container.appendChild(para); }

Answer 1

Cuba tanggalkan gelung tambahan: 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>