外部 JSON の各部分を保持する Div を作成する
<p>そこで、外部でホストされている JSON から描画して表示するための基本を次のようにまとめました。</p>
<p>JSON の形式は次のとおりです。</p>
<pre class="brush:php;toolbar:false;">{
"title": "各国の箇条書き",
"ソース": "データロフト",
"データ"： {
"経済"： [
「ストライキ活動の影響が建設活動の増加を相殺したため、2月の英国経済は堅調に推移した。ONSのレポートによると、2月までの3か月で経済は0.1%成長した。」
「3月時点のインフレ率は10.1％で、2月から0.3％低下した。食料価格は上昇を続ける一方、燃料価格は緩和している。インフレ率は2023年に低下すると予想されている。」
「イングランド銀行は基準金利を１４年ぶりの高水準となる４．２５％に引き上げ、金利は今年４．５％でピークに達すると予想されている。次回のＭＰＣ会合は５月１１日に開催される。」
]、
「トランザクション」: [
「Rightmove のデータによると、2023 年 3 月に達した販売契約の数は、2019 年 3 月よりわずか 1% 減少しました。販売契約の数がパンデミック前のレベルに戻ったのは、2022 年 9 月以来初めてです。」
「今後 12 か月間、純残高のある代理店は売上の増加を期待しています。これは、RICS 指標がプラスに転じた 2022 年 3 月以来初めてです。代理店は、今後 3 か月間、売上が引き続き圧迫されると予想しています。」,
「HMRCの報告書によると、2023年2月に9万340件の取引が行われ、2022年に比べて18%減少し、2019年のいわゆる『通常』市場では7%減少した。」
]、
「住宅価格」: [
「予算責任局の最新の公式予測によると、住宅市場の価格は2021～22年の19%以上の価格上昇と比較して、2023/24年には6.8%下落すると予想されています。」
「4.5%の割引での販売を達成するための提示価格は、ここ5年間で最高額(Zoopla)であり、現在の市場の潜在的な売り手の多くは価格設定において過度に楽観的です。」、
「2021年1月の平均住宅価格は28万8,074ポンドで、前月比では1.1％下落したが、前年同期比では6.3％上昇した（英国HPI、ONS）。」
]、
"要求"： [
「不動産に対する買い手の需要は12月以来大幅に増加しています。Propertymarkのデータによると、各エージェントは2022年2月に94人の潜在的な買い手を登録しましたが、1月には70人、12月には39人でした。」
「2022年2月の住宅ローン承認件数は43,536件で、パンデミック前（2015～2019年）の平均を34％下回りましたが、1月よりは10％増加しました。パンデミック前の2月の承認件数は通常、1月よりわずかに低かったです。」、
「最新の RICS 住宅市場調査によると、回答者の 40% が、よりエネルギー効率の高い住宅への関心が高まっていると回答し、61% が、エネルギー効率の高い住宅の価値は現在の市場状況では安定していると述べています。」
]、
"発達"： [
「政府の計画では、2033年までに販売されるすべての住宅にクラスCのエネルギー性能証明書を取得することが義務付けられており、2025年以降はガスボイラーを使用した新築住宅の建設は禁止されています。この提案は英国政府のゼロエミッションルックバックプログラムの一部です。」
「3月は建設活動全体が増加したが、住宅部門の活動は減少し、回答者はコスト上昇により入札機会が減少したと回答した(IHS Markit)。」
「DLUHC が発表したデータによると、2022 年には 260,000 戸以上の新築住宅が建設され、2022 年比 3.3% 増加しました。前四半期には 68,000 戸以上の新築住宅が完成し、前年比 8.9% 増加しました。 」
]、
「投資/賃貸」: [
「RICSの最新調査によると、賃貸物件の需要は過去5カ月で最高レベルにある。需要は供給を上回り続けており、賃貸価値は引き続き圧迫されている。」、
「英国の民間賃貸価格は3月までの1年間に4.9%上昇し、イングランドとウェールズの多くの地域で記録が始まって以来最大の伸びを記録した。ONSの民間住宅賃貸価格指数には既存および新規の賃貸物件が含まれている。」
「政府は住宅所有者に対し、所有物件を観光地に適用される短期休暇用賃貸に転用する前に計画許可の取得を義務付ける計画について協議している。許可が必要になるまでに30～90日間の賃貸期間が認められる可能性がある。」
]、
「プライムマーケット」: [
「ブルッキングス研究所の調査によると、海外事業体登録制度の導入により、英国のオフショアタックスヘイブンに関わる不動産取引は他の海外法域と比べて大幅に減少しました。」
「ロンドンの高級賃貸市場の供給は急激に減少している。ナイト・フランク氏によると、月後半のレンタル注文は前半と比べて21％減少し、その後の2週間で12％減少した」 "、
「今年の第 1 四半期の PCL 販売記録は、2022 年の第 1 四半期に比べて 21% 減少し、前四半期に比べて 22% 減少しました。しかし、2023 年の第 1 四半期の販売記録は、2023 年の第 1 四半期のどの第 1 四半期よりも低かったです。」 2017 ～ 2020 詳細 (JLL)。」
]
}
}</pre>
<p>JSON データを描画して HTML に挿入するために使用するスクリプトは次のとおりです。</p>
<pre><code>let dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7A FRJ IgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgBI3e3Q/national_bullets";
fetch(dataloft_national_bullets_url)
.then((応答) => 応答.json())
.then((ペイロード) => {
letcontainer = document.getElementById("national_bullets_target_container");
for (payload.data の const div) {
let data = document.createElement('div');
data.appendChild(document.createTextNode(div));
コンテナ.appendChild(データ);
for (payload.data の const 章) {
let header = document.createElement('h1');
header.appendChild(document.createTextNode(章));
コンテナー.appendChild(ヘッダー);
for (payload.data[章]のconst段落) {
let para = document.createElement('li');
para.appendChild(document.createTextNode(payload.data[章][段落]));
コンテナー.appendChild(para);
}</code></pre>
