Получение данных с сервера (API?) И отображение их на HTML-странице

Это мой первый пост о переполнении стека, поэтому прошу прощения за любое незнание с моей стороны. Я занимаюсь HTML и JS около 2 месяцев.

У меня проблемы с вопросом, который мне задали для школы. Вопрос такой:

Создайте веб-сайт, на котором будут отображаться три случайные шутки о Чаке Норрисе. Используйте найденный здесь API: http://www.icndb.com/api/. Вы можете использовать этот URL для получения анекдотов: http://api.icndb.com/jokes/random/3.

Я могу получить данные (шутки) с сервера и отобразить их на своей консоли, но не могу понять, как отобразить их на странице HTML. Я считаю, что это может быть связано с тем, что я пытаюсь использовать ванильный JavaScript при работе с node.js?

Вот код JavaScript (jokes.js)

require('isomorphic-fetch');

const request = async () => {
  const response = await fetch("http://api.icndb.com/jokes/random/3");
  const json = await response.json();
  console.log(json);
    joke1 = json.value[0].joke;
    document.getElementById("disp").innerHTML = joke1;
}
request();

А вот HTML (jokes.html)

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Chuck Norris Jokes</title>
    <meta charset="utf-8">
    <!--My CSS File-->
    <link href="jokes.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!--Icons-->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
<div class="container">

<h1>Chuck Norris Jokes</h1>
<br>

<div id="disp">

</div>

</ul>

</div>

<!--My JavaScript File-->
<script type="text/javascript" src="jokes.js"></script>

</body>

</html>

Вот результат моей консоли с ошибкой, которую я понятия не имею, что это означает, даже после большого количества поисков в Google. Вот что происходит, когда я набираю в терминале «шутки об узлах». Использование VS Code.

Терминальный выход с ошибкой:

введите здесь описание изображения

Заранее благодарим вас за помощь.


node.js javascript html fetch-api isomorphic-fetch-api
person Byron Georgopoulos    schedule 14.04.2020    source источник
comment
Шаг 1. Решите, хотите ли вы написать JavaScript для работы через Node.js или JavaScript для работы через элемент <script> в веб-браузере.   -  person Quentin    schedule 14.04.2020

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку у вас уже есть конечная точка api, вам не нужно получать ее с помощью node.js, вы можете вызывать ее непосредственно из внешнего интерфейса, используя vanilla javascript ajax (http-вызов) или если вы используете интерфейсную структуру (angular / response). Вот простой пример: https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

person amrutk    schedule 14.04.2020

arrow_upward
0
arrow_downward

Другой пост верен, объясняя, что нужно использовать вызов AJAX на стороне клиента vanilla javascript (или JQuery), и вы должны связать его со своим HTML с помощью тега script, например:

<script src="myscripts.js"></script>

хороший пример AJAX в ванильном JS Vanilla Javascript-версия AJAX

person Connor Musick    schedule 14.04.2020