How can I create a News API with data from HTML, Jquery, Javascript using html because I cannot retrieve any data with the present code from NewsAPI.org

> <!DOCTYPE html>
> <html>
> 
> <head>
>     <meta charset="utf-8">
>     <title>News</title>
>     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
>         var url = "https://newsapi.org/v2/top-headlines?country=us&apiKey=49a539dd227b4feebd4cd98ebfaa417e";
>         var req = new Request(url);
>         fetch(req)
>             .then(function (response) {
>                 console.log(response.json());
>             });
>         $(document).ready(function () {
>             $ajax({ url: "https://newsapi.org/v2/top-headlines?country=us&apiKey=49a539dd227b4feebd4cd98ebfaa417e" }).then(function (data) {
>                 alert(JSON.stringify(data));
>                 alert(data.source);
>                 for (i = 0; i < data.articles.length; i++) {
>                     var title = data.articles[i].title;
>                     alert(title);
>                     var author = data.articles[i].author;
>                     alert(author)
>                     var urltoimage = data.articles[i].urlToImage;
>                     var url = data.articles[i].url;
>                     var publishAt = data.articles[i].publishAt;
>                     var description = data.articles[i].description;
>                     $('.title').append(data.articles[i].title);
>                     $('.author').append(data.articles[i].author);
>                     $('#list').append('<div class="my image"><a target="_blank" href="' + data.articles[i].url + '"><img src ="' + data.articles[i].urlToImage + '" style="width:250px" /></a></div> <br />');
>                     $('#list').append(data.articles[i].url + '<br />' + data.articles[i].publishAt + '</div><br />');
>                     $('#list').append(data.articles[i].description );
>                     var var_title = data.articles[i].title;
>                     var var_author = data.articles[i].author;
>                     var var_urltoimage = data.articles[i].urlToImage;
>                     var var_url = data.articles[i].url;
>                     var var_publishAt = data.articles[i].publishAt;
>                     var var_description = data.articles[i].description;
>                     var start_wrapper = '<div id="wrapper">';
>                     var prn_title = '<div class="my_title">';
>                     prn_title = prn_title + var_title;
>                     prn_title = prn_title + '</div>';
>                     var prn_author = '<div class="my_left_text">';
>                     prn_author = prn_author + var_author;
>                     prn_author = prn_author + '</div>';
>                     var prn_image = 'div class ="my_content">';
>                     prn_image = prn_image + '<a target="_blank" href="' + var_url + '"><img src="' + var_urltoimage + '" style="width:250px" /></a>';
>                     prn_image = prn_image + '</div>';
>                     var prn_content = '<div class="my_content">';
>                     prn_content = prn_content + var_description;
>                     prn_content = prn_content + '</div>';
>                     var prn_url = '<div class="my_left_text">';
>                     prn_url = prn_url + var_url;
>                     prn_url = prn_url + '</div>';
>                     var prn_date = '<div class="my_left_text">';
>                     prn_date = prn_date + var_publishedAt;
>                     prn_date = prn_date + '</div>';
>                     var end_wrapper = '</div>';
>                     $('#list').append(start_wrapper + prn_title + prn_author + prn_image + prn_content + prn_url + prn_date + end_wrapper);
>                 }
>             });
>         });
>     </script>
> <body>
>     <div class="title">Title</div>
> </body>
> </head>
> </html>

Please help

1 Like