>

Json 파일의 데이터를 HTML 페이지에 인쇄하려고했습니다. 이 데이터를 가져와야합니다.

https://jsonplaceholder.typicode.com/posts/1

이 코드를 사용하여 파일에서 데이터를 가져 오려고했습니다.

https://github.com/typicode/jsonplaceholder#how-to

이것은 제가 작성한 기능입니다 :

JS :

function req1() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))
        // we print the title and the body of the post recived
    var title = response.data.title;
    var body = response.data.body
    document.getElementById("printTitle").innerHTML = title
    document.getElementById("printBody").innerHTML = body
}

HTML :

<div class="news-btn-div" data-tab="news-2" onclick="req1()">2</div>
    <div id="news-2" class="news-content-container-flex">
      <div class="news-title">
        <span id="printTitle">
        </span>
      </div>
      <div class="news-content-1">
        <span id="printBody">
        </span>
      </div>
    </div>

그래서 .news-btn-div DIV를 클릭하면 데이터를 가져와야하지만 실수를 저지르는 곳은 얻지 못합니다.

printTitle 및 #printBody DIVS는 데이터로 채워 져야합니다.

어떤 조언?

여기 내 Jsfiddle :

https://jsfiddle.net/matteous1/ywh0spga/

  • 답변 # 1

    페치의 두 번째 콜백에서 오류가 발생했습니다. json 에서 데이터를 가져와야합니다.  객체 (당신이 response.json() 에 준 이름  콜백). 그런 다음 json 의 적절한 요소에 액세스하십시오.  인쇄하기 위해. @Clint가 지적했듯이 수신 된 데이터를 사용하기 전에 콜백을 닫았습니다 ( title body ) 범위 밖에서 액세스하려고했습니다.

    function req1() {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(json => {
          const title = json.title;
          const body = json.body;
          document.getElementById("printTitle").innerHTML = title;
          document.getElementById("printBody").innerHTML = body;
        });
    }
    req1();
    
    

    <div class="news-btn-div" data-tab="news-2" onclick="req1()">2</div>
        <div id="news-2" class="news-content-container-flex">
          <div class="news-title">
            TITLE
            <span id="printTitle">
            </span>
          </div>
          <div class="news-content-1">
            BODY
            <span id="printBody">
            </span>
          </div>
        </div>
    
    

관련 자료

  • 이전 Google 클라우드 서비스에서 추적을 요청할 수 있습니까?
  • 다음 react native cli - 반응 네이티브 클리닉 - 안드로이드 프로젝트를 실행하지 못함