使用JS导入Json数据后加载页面后显示默认结果

Question

I've been trying to import Json data from here https://jsonplaceholder.typicode.com/posts/1 to my website.

I just managed to do that but now I'd like to create different buttons connected to different posts, so:

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

and so on. I order to do that I copied the function I used for the first one and I reused the function by changing the function's name. I don't know if it was a good idea or if there is a better way to do that and avoid copying the function every time I have to add a post.

At the moment seems to work but every time I load the page I get a random post. I'd like to show the first one ( https://jsonplaceholder.typicode.com/posts/1 ) and show the others just if I click on the buttons (numbers), is there a way to do that?

Here my code:

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();

Here my JSfiddle where posts are shown randomly when the page is loaded

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

Answer 1

First unique your req function to this

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

Then, You must use promise . Read more about Promise here

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

And put different elements and tags for each post or make them dynamically.