Блог

Главная - Вопросы по программированию - Почему появляются эти странные функции, которые я использую inner.HTML

Почему появляются эти странные функции, которые я использую inner.HTML

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь показать данные JSON на HTML-странице, но, как ни странно, они не отображают данные JSON, но показывают это.

Тот же код работает хорошо, если inner.HTML строка удаляется и используется console.log вместо нее, это вывод, если console.log используется вместо inner.HTML .

Код:

 pat = $.getJSON("../data/random/anime/pat/pat.json");

function randomObject(obj) {
    let arr = Object.values(obj);
    content = arr[Math.floor(Math.random() * arr.length)];
    document.getElementById("content").innerHTML = content;
}

randomObject(pat);
 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASEAN API V2</title>
</head>

<body>
    <p id="content"></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./scripts/api.js"></script>
</body>

</html>

Данные в формате JSON:

 [
    {
        "gif": "https://media.discordapp.net/attachments/901270821715210260/901270895446863912/neet-anime.png"
    },
    {
        "gif": "https://tenor.com/view/kanna-kamui-pat-head-pat-gif-12018819"
    },
    {
        "gif": "https://tenor.com/view/pat-head-gakuen-babysitters-kotarou-anime-cute-gif-17907437"
    },
    {
        "gif": "https://tenor.com/view/umaru-frown-happy-feeling-better-pat-gif-10947495"
    }
]

Комментарии:

1.Как вы думаете, что $.getJSON возвращает?

2. Если вы хотите получить адрес из массивов объектов, данный вывод консоли также не является тем, что вы хотите. Вам нужно arr[Math.floor(Math.random() * arr.length)].gif; .

Ответ №1:

Вы должны вызвать randomObject следующим образом: randomObject(pat.responseJSON); или

 $.getJSON( "../data/random/anime/pat/pat.json", function( data ) {
  randomObject(data);
})

Комментарии:

1. решает ли это проблему?

Ответ №2:

Я не могу воспроизвести ту же проблему, что и у вас, но единственное, что мне нужно было изменить, чтобы заставить это работать, — это упорядочить объект, чтобы у меня было его содержимое в виде простой строки.
Затем это может быть применено к элементу HTML

 function randomObject(obj) {
    const arr = Object.values(obj); // Is this necessary? It works fine for me without, since the data is already an array
    const randomValue = Math.floor(Math.random() * arr.length); // As a variable to make it clearer what this is for
    // "Stringify" (Turn it into a string) first, then we can apply it to the HTML element's content as a plain string
    document.getElementById("content").innerHTML = JSON.stringify(arr[randomValue]);
}

Комментарии:

1. Видя приведенный выше ответ, я вижу, что ваша проблема, скорее всего, связана с тем, что вызов getJSON не ожидается, и вы используете его результаты до их доступности. Мое решение здесь предполагает, что данные, приведенные выше, доступны и их просто нужно превратить в строку для отображения. В противном случае он отображается как [Объект object]

Метки: ,