如何设置一个<h1>来自 API 响应的值？</h1>

Question

I have been trying to set a page title based on an API response. My HTML is:

<h1 id='league_name'></h1>

My Javascript is:

<script>
      fetch('https://api.example.com')
      .then(response => response.json())
      .then(json => {
        var name = JSON.stringify(json)
        document.getElementById('league_name').innerHTML = name;
      });
      </script>

But it stays blank. The API response is just a single string

Answer 1

First of all your URL is not working. it is main reason. I have used mockAPI: https://jsonplaceholder.typicode.com/ now it works as expected

Also JSON.stringify is not necessary, because data already parsed by .json()

 <h1 id='league_name'></h1> <script> fetch('https://jsonplaceholder.typicode.com/users/2').then(response => { return response.json(); }).then(user => { console.log(user) document.getElementById('league_name').innerHTML = user.name; }).catch(e => console.log(e)) </script>