为什么我的加密 API 返回错误的字符串？

Question

I was wondering why the javascript code below does not return the correct information l need. For example, l want a news title from the API but it gives me different information. To summarise, l want to target a specific title like [0] but it won't change.

Second question is, is it possible to connect 2 different APIs that target different HTML elements in one code or would you have to do separate javascript functions?

I'm learning and any explanation would be helpful.

<div class="box" id="insert-news">
        <div class="title">Marketplace </div>
        <h2>Live News</h2>
        <p><span class='highlight'>News Article</span></p>
        <p>Information here</p>
    </div>

function getData(){
    fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10').then(response => {
        return response.json();
    }).then(data => {
        console.log(data.news[2].title);
        let newsTitle ='';
        data.news.map((values)=>{
            newsTitle = `<div class="title">Marketplace </div>
        <h2>Live News</h2>
        <p><span class='highlight'>News Article</span></p>
        <p>${values.title}</p>
    </div>`;
        })
        document.getElementById('insert-news').innerHTML = newsTitle;
    })
}

getData();

Answer 1

I think what you are trying to reach is to display all news inside insert-news container

function getData() {
  fetch("https://api.coinstats.app/public/v1/news?skip=0&limit=10")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      document.getElementById("insert-news").innerHTML = data.news
        .map(
          (values) =>
            `<div class="title">Marketplace </div>
      <h2>Live News</h2>
      <p><span class='highlight'>News Article</span></p>
      <p>${values.title}</p>
  </div>`
        )
        .join("");
    });
}