외부 JSON의 각 부분을 보관할 Div 생성

Question

그래서 외부 호스팅 JSON에서 그림을 그려 다음과 같이 표시하기 위한 기본 사항을 정리했습니다.

JSON의 형식은 다음과 같습니다.

{
    "title": "국가 총알",
    "출처": "데이터로프트",
    "데이터": {
        "경제": [
            "영국 경제는 파업의 영향이 건설 활동의 증가를 상쇄하면서 2월에 안정적으로 유지되었습니다. ONS 보고서에 따르면 경제는 2월까지 3개월 동안 0.1% 성장했습니다."
            "3월 기준 인플레이션은 10.1%로 2월보다 0.3% 하락했습니다. 식품 가격은 계속 상승하고 연료 가격은 완화되었습니다. 2023년에는 인플레이션이 하락할 것으로 예상됩니다.",
            "영란은행은 기준금리를 14년 만에 최고 수준인 4.25%로 인상했고 올해 금리는 4.5%로 정점에 이를 것으로 예상됩니다. 다음 MPC 회의는 5월 11일에 열립니다."
        ],
        "거래": [
            "Rightmove의 데이터에 따르면 2023년 3월에 도달한 판매 계약 건수는 2019년 3월보다 1% 적었습니다. 판매 계약 건수가 팬데믹 이전 수준으로 돌아온 것은 2022년 9월 이후 처음입니다.",
            "향후 12개월 동안 순 잔액이 있는 에이전트는 매출 성장을 기대합니다. 이는 2022년 3월 이후 처음으로 RICS 지표가 긍정적으로 전환된 것입니다. 에이전트는 향후 3개월 동안 매출이 계속 압박을 받을 것으로 예상합니다.",
            "HMRC의 보고서에 따르면 2023년 2월에 90,340건의 거래가 발생했는데, 이는 2022년에 비해 18%, 2019년 소위 '정상' 시장에서 7% 감소한 것입니다."
        ],
        "집값": [
            "예산책임국(Office for Budget Resibility)의 최근 공식 전망에 따르면 주택 시장 가격은 2021~22년 19% 이상의 가격 상승에 비해 2023/24년에는 6.8% 하락할 것으로 예상됩니다.",
            "4.5% 할인된 가격으로 판매를 달성하기 위한 요구 가격은 5년 만에 최고이며(Zoopla) 현재 시장의 많은 잠재적 판매자는 가격 책정에 대해 지나치게 낙관적입니다.",
            "2021년 1월 평균 주택 가격은 £288,074로 전월에 비해 1.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년부터 가스 보일러를 사용하여 건설되는 신규 주택은 없습니다. 이 제안은 영국 정부의 제로 배출 룩백(Zero Emissions Lookback) 프로그램의 일부입니다.",
            "3월 전체 건설 활동은 증가했지만 주택 부문의 활동은 감소했습니다. 응답자들은 비용 상승으로 인해 입찰 기회가 줄어들었다고 밝혔습니다(IHS Markit).",
            "DLUHC가 발표한 데이터에 따르면 2022년에는 260,000개 이상의 신규 주택이 건설되어 2022년보다 3.3% 증가했습니다. 지난 분기에는 68,000개 이상의 신규 주택이 완공되어 전년 대비 8.9% 증가했습니다."
        ],
        "투자/임대": [
            "최근 RICS 조사에 따르면 임대 부동산에 대한 수요는 5개월 만에 최고 수준입니다. 수요가 계속해서 공급을 앞지르고 임대 가치는 여전히 압박을 받고 있습니다.",
            "영국 민간 임대 가격은 3월까지 4.9% 상승했으며 잉글랜드와 웨일스의 많은 지역은 기록이 시작된 이래 가장 큰 성장을 경험했습니다. ONS 민간 주택 임대 가격 지수에는 기존 및 신규 임대 부동산이 포함됩니다. ",
            "정부는 주택 소유자에게 부동산을 단기 휴가 허가로 전환하기 전에 계획 허가를 얻도록 요구하는 계획에 대해 협의하고 있으며 이는 관광 지역에 적용됩니다. 허가가 필요하기 전에 30-90일의 임대가 허용될 수 있습니다."
        ],
        "주요 시장": [
            "Brookings Institution의 연구에 따르면 해외 법인 등록부의 도입으로 인해 다른 해외 관할권에 비해 영국의 역외 조세 피난처와 관련된 부동산 거래가 크게 감소했습니다.",
            "런던 고급 렌탈 시장의 공급이 급격하게 감소했습니다. 나이트 프랭크에 따르면 이달 하반기 렌탈 주문은 상반기 대비 21% 감소했고 이후 2주 동안 12% 감소했습니다." ",
            "올해 1분기 PCL 판매 기록은 2022년 1분기보다 21%, 전 분기보다 22% 감소했다. 하지만 2023년 1분기 판매 기록은 2022년 1분기보다 낮았다. 2017~2020년 더보기(JLL)."
        ]
    }
}

JSON 데이터를 그려 HTML에 삽입하는 데 사용하는 스크립트는 다음과 같습니다.

<code>let dataloft_national_bullets_url = "https://inform.dataloft.co.uk/api/BAh7CEkiCGdpZAY6BkVUSSIrZ2lkOi8vaW5mb3JtL1VzZXJBcmVhLzI2NzM2P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7A FRJIgxkZWZhdWx0BjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36ebf74c32194c59ad4a7d9fb89db230a66efadf/V8UDrS9mIAVkNJcgBI3e3Q/national_bullets";
가져오기(dataloft_national_bullets_url)
    .then((응답) => response.json())
    .then((페이로드) => {
        let 컨테이너 = 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 장) {
                헤더 = document.createElement('h1');
                header.appendChild(document.createTextNode(장));
                컨테이너.appendChild(헤더);
                for (payload.data[chapter]의 const 단락) {
                    let para = document.createElement('li');
                    para.appendChild(document.createTextNode(payload.data[chapter][paragraph]));
                    컨테이너.appendChild(para);
                }</code>

Answer 1

추가 루프를 제거해 보세요: for (const div in payload.data)?

으아악 으아악