Créer des Divs pour contenir chaque partie du JSON externe

Question

J'ai donc rassemblé les bases pour tirer du JSON hébergé en externe et l'afficher comme ceci :

Le format JSON est le suivant :

{
    "title": "Balles nationales",
    "source": "Dataloft",
    "données": {
        "Économie": [
            "L'économie britannique est restée stable en février, l'impact des grèves ayant compensé la hausse de l'activité de construction. L'économie a augmenté de 0,1% au cours des trois mois précédant février, selon le rapport de l'ONS.",
            "En mars, l'inflation était de 10,1%, en baisse de 0,3% par rapport à février. Les prix des produits alimentaires continuent d'augmenter, tandis que les prix du carburant ont baissé. L'inflation devrait baisser en 2023.",
            "La Banque d'Angleterre a relevé son taux d'intérêt de référence à 4,25 %, le niveau le plus élevé depuis 14 ans, et les taux devraient culminer à 4,5 % cette année. La prochaine réunion du MPC aura lieu le 11 mai."
        ],
        "Transactions" : [
            "Selon les données de Rightmove, le nombre de contrats de vente conclus en mars 2023 n'était que de 1 % inférieur à celui de mars 2019. C'est la première fois depuis septembre 2022 que le nombre de contrats de vente revient aux niveaux d'avant la pandémie.",
            "Au cours des 12 prochains mois, les agents ayant un solde net s'attendent à une croissance des ventes, ce qui est la première fois depuis mars 2022 que l'indicateur RICS devient positif. Les agents s'attendent à ce que les ventes restent sous pression au cours des trois prochains mois.",
            "Selon le rapport du HMRC, 90.340 transactions ont eu lieu en février 2023, en baisse de 18% par rapport à 2022 et de 7% par rapport au marché dit 'normal' en 2019."
        ],
        "Prix des maisons": [
            "Selon les dernières prévisions officielles de l'Office pour la responsabilité budgétaire, les prix sur le marché du logement devraient baisser de 6,8% en 2023/24, contre une croissance des prix de plus de 19% en 2021-22.",
            "Le prix demandé pour réaliser la vente avec une remise de 4,5% est le plus élevé depuis 5 ans (Zoopla) et de nombreux vendeurs potentiels sur le marché actuel sont trop optimistes lors de la fixation des prix.",
            "Le prix moyen de l'immobilier en janvier 2021 était de 288 074 £, en baisse de 1,1 % par rapport au mois précédent mais en hausse de 6,3 % par rapport à la même période de l'année dernière (UK HPI, ONS)."
        ],
        "Demande": [
            "La demande de propriétés a considérablement augmenté depuis décembre. Selon les données de Propertymark, chaque agent a enregistré 94 acheteurs potentiels en février 2022, contre 70 en janvier et 39 en décembre."
            "Le nombre d'approbations de prêts hypothécaires en février 2022 était de 43 536, soit 34 % de moins que la moyenne d'avant la pandémie (2015-2019), mais 10 % de plus qu'en janvier. Les approbations de février d'avant la pandémie étaient généralement légèrement inférieures à celles de janvier.",
            « Selon la dernière enquête RICS sur le marché résidentiel, 40 % des personnes interrogées ont déclaré constater un intérêt accru pour les maisons plus économes en énergie, et 61 % ont déclaré que la valeur des maisons économes en énergie reste stable dans les conditions actuelles du marché."
        ],
        "Développement": [
            "Les plans du gouvernement exigent que toutes les maisons vendues aient un certificat de performance énergétique de classe C d'ici 2033, et qu'aucune nouvelle maison ne soit construite avec des chaudières à gaz à partir de 2025. Les propositions font partie du programme Zero Emissions Lookback du gouvernement britannique.",
            "Alors que l'activité globale de construction a augmenté en mars, l'activité dans le secteur du logement a chuté, les personnes interrogées citant moins d'opportunités d'appel d'offres en raison de la hausse des coûts (IHS Markit).",
            « Selon les données publiées par le DLUHC, plus de 260 000 nouveaux logements ont été construits en 2022, soit une augmentation de 3,3 % par rapport à 2022. Plus de 68 000 nouveaux logements ont été achevés au cours du dernier trimestre, soit une augmentation de 8,9 % sur un an. "
        ],
        "Investissement/Locations" : [
            "La demande de biens locatifs est à son plus haut niveau depuis cinq mois, selon la dernière enquête RICS. La demande continue de dépasser l'offre et les valeurs locatives restent sous pression.",
            "Les prix des locations privées au Royaume-Uni ont augmenté de 4,9 % au cours de l'année précédant mars, et de nombreuses régions d'Angleterre et du Pays de Galles ont connu leur plus forte croissance depuis le début des relevés. L'indice des prix de location des logements privés de l'ONS comprend les propriétés locatives existantes et nouvelles. ",
            "Le gouvernement mène actuellement des consultations sur les projets visant à obliger les propriétaires à obtenir un permis de construire avant de convertir leurs propriétés en locations de vacances à court terme, ce qui s'appliquerait aux sites touristiques. Des périodes de location de 30 à 90 jours peuvent être autorisées avant qu'une autorisation ne soit requise."
        ],
        "Marchés prime": [
            "Selon une étude de la Brookings Institution, l'introduction du Overseas Entity Register a conduit à une réduction significative des transactions immobilières impliquant des paradis fiscaux offshore au Royaume-Uni par rapport à d'autres juridictions étrangères.",
            « L'offre sur le marché locatif haut de gamme de Londres a fortement chuté. Selon Knight Frank, les commandes de location au cours de la seconde moitié du mois étaient inférieures de 21 % à celles de la première moitié du mois, suivies d'une baisse de 12 % au cours des deux semaines suivantes. .",
            « Le record de ventes de PCL au premier trimestre de cette année était inférieur de 21 % à celui du premier trimestre 2022 et de 22 % par rapport au trimestre précédent. Cependant, le record de ventes au premier trimestre 2023 était inférieur à celui de n'importe quel premier trimestre de 2022. 2017 à 2020 Plus (JLL)."
        ]
    }
}</pré>
<p>Le script que j'utilise pour dessiner les données JSON et les insérer dans HTML est le suivant : </p>
<pre><code>let dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQ Y7A FRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgBI3e3Q/national_bullets" ;
récupérer (dataloft_national_bullets_url)
    .then((réponse) => réponse.json())
    .then((charge utile) => {
        let conteneur = document.getElementById("national_bullets_target_container");
        pour (const div dans payload.data) {
            let data = document.createElement('div');
            data.appendChild(document.createTextNode(div));
            conteneur.appendChild(données);
            pour (chapitre const dans payload.data) {
                let header = document.createElement('h1');
                header.appendChild(document.createTextNode(chapter));
                conteneur.appendChild(en-tête);
                for (paragraphe const dans payload.data[chapitre]) {
                    let para = document.createElement('li');
                    para.appendChild(document.createTextNode(payload.data[chapter][paragraphe]));
                    conteneur.appendChild(para);
                }</code>

Answer 1

Essayez de supprimer les boucles supplémentaires : 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>