创建Divs以容纳外部JSON的每个部分
<p>所以我已经整理了基本的内容，以便从外部托管的JSON中绘制并显示如下：</p>
<p>JSON的样式如下：</p>
<pre class="brush:php;toolbar:false;">{
"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）。"
]
}
}</pre>
<p>我用于绘制JSON数据并将其插入到HTML中的脚本如下：</p>
<pre><code>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 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></pre>
