0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="section">
        <option value="home">Home</option>
        <option value="arts">Art</option>
    </select>
    <button id="refresh">Refresh</button>
    <script>
        function callAPI() {
            let output = ''
            fetch(`http://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
                .then(res => res.json())
                .then(data => {
                    console.log(data)
                })
        }
        const section = document.querySelector('#section')
        const refreshBtn = document.querySelector('#refresh')

        section.addEventListener('change', () => {
            callAPI()
        })

        refreshBtn.addEventListener('click', () => {
            alert('I')
            callAPI()
        })

        callAPI()

    </script>
</body>
</html>

This is the code that I already wrote! But I want to display information on web page not in console.log! How can I do that? Could anyone help me? I appreciate any help!

Rodentman87
  • 640
  • 7
  • 14
Chrish
  • 15
  • 3
  • Probably should remove your api-key. Unless it is some public testing environment. The rest depends on how you want to display it. – Lain Jun 06 '20 at 21:03
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – AndrewL64 Jun 06 '20 at 21:04
  • Same way you append any other content into a web page with javascript. Seems like you are needing a tutorial which is not what Stackoverflow is about – charlietfl Jun 06 '20 at 21:08

2 Answers2

0

Firstly make your requests on https rather than http. Then u may take cors related errors.

create one element and use innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="section">
        <option value="home">Home</option>
        <option value="arts">Art</option>
    </select>
    <button id="refresh">Refresh</button>
    <span id="result"></span>
    <script>
        function callAPI() {
            let output = ''
            fetch(`https://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
                .then(res => res.json())
                .then(data => {
                    result.innerHTML=JSON.stringify(
                         data.results.map ( el => ({ title: el.title, whom: el.byline }))
                    )
                })
        }
        const section = document.querySelector('#section')
        const refreshBtn = document.querySelector('#refresh')
        const result = document.querySelector('#result')

        section.addEventListener('change', () => {
            callAPI()
        })

        refreshBtn.addEventListener('click', () => {
            callAPI()
        })

        callAPI()

    </script>
</body>
</html>
andrew jones
  • 96
  • 3
0

You may want to add to your <body> tag another element, for example a Paragraph

<p id="area"></p>

Then on your function

     function callAPI() {
            let output = ''fetch(`http://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
                .then(res => res.json())
                .then(data => {
                    console.log(data)
                })
        }

Instead of console.log(data) write this 

$('#area').html(data);

This will add the data content into a paragraph HTML tag Hope it helps

sgClaudia98
  • 236
  • 4
  • 14