使用JS導入Json數據后加載頁面后顯示默認結果

Question

我一直在嘗試從這里https://jsonplaceholder.typicode.com/posts/1導入Json數據到我的網站。

我只是設法做到這一點，但現在我想創建連接到不同帖子的不同按鈕，因此：

• BTN 1-> https://jsonplaceholder.typicode.com/posts/1
• BTN 2-> https://jsonplaceholder.typicode.com/posts/2
• BTN 3-> https://jsonplaceholder.typicode.com/posts/3

等等。 我要做的是，我復制了用於第一個函數的函數，並通過更改函數名稱重用了該函數。 我不知道這是一個好主意還是有更好的方法來做到這一點，並且避免在每次必須添加帖子時都復制該函數。

目前似乎可以正常工作，但是每次我加載頁面時，都會收到一個隨機帖子。 我想顯示第一個（ https://jsonplaceholder.typicode.com/posts/1 ）並顯示其他（僅當我單擊按鈕（數字）時），有沒有辦法做到這一點？

這是我的代碼：

的HTML

 <div class="news-wrap margin-top-div">
        <div class="news-btn-container-flex">
          <div class="news-btn-div current" data-tab="1" onclick="req1()">1</div>
          <div class="news-btn-div" data-tab="2" onclick="req2()">2</div>
          <div class="news-btn-div" data-tab="3" onclick="req3()">3</div>
          <div class="news-btn-div" data-tab="4" onclick="req4()">4</div>
          <div class="news-btn-div" data-tab="5" onclick="req5()">5</div>       
        </div>

        <div class="news-content-container-flex">
          <div class="news-title">
            <span id="newsTitle">
            </span>
          </div>
          <div class="news-content-1">
            <span id="newsContent">              
            </span>
          </div>
          <div class="news-content-2">
            <span>
            </span>
          </div>
        </div>       

      </div>

JS

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("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req1();


function req2() {
  fetch('https://jsonplaceholder.typicode.com/posts/2')
    .then(response => response.json())
    .then(json => {
      const title = json.title;
      const body = json.body;
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req2();


function req3() {
  fetch('https://jsonplaceholder.typicode.com/posts/3')
    .then(response => response.json())
    .then(json => {
      const title = json.title;
      const body = json.body;
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req3();


function req4() {
  fetch('https://jsonplaceholder.typicode.com/posts/4')
    .then(response => response.json())
    .then(json => {
      const title = json.title;
      const body = json.body;
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req4();


function req5() {
  fetch('https://jsonplaceholder.typicode.com/posts/5')
    .then(response => response.json())
    .then(json => {
      const title = json.title;
      const body = json.body;
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req5();

這是我的JSfiddle，頁面加載時隨機顯示帖子

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

Answer 1

首先使您的req功能獨特

function req(input) {
  fetch('https://jsonplaceholder.typicode.com/posts/' + input)
    .then(response => response.json())
    .then(json => {
      return json;
    });
}

然后，您必須使用promise 。 在此處閱讀有關Promise的更多信息

Promise.all([req(1), req(2), req(3)])
    .then(function(res) {
        // all data here
    }, function(err) {
        // one or more failed
    });

並為每個帖子放置不同的元素和標簽，或者使它們動態化。