时间戳

首页 > 解决方案 > 在需要时使 JSON 文件的属性可点击

javascript - 在需要时使 JSON 文件的属性可点击

问题描述

我从 API 调用收到的 JSON 文件中获得了一堆对象，我需要呈现所有对象的消息属性，并且在其中一些对象中，消息中有超链接。

这是我的 HTML 试图使消息中的超链接可点击

        <div class="quote-text">
            <i class="fas fa-quote-left"></i>
            <span id="message"> <a href="hyperlink"></a></span>
        </div>

这是我的 JS 脚本，我无法弄清楚如何让它做我想做的事，我相信在必要时使用 for 循环或 forEach() 进行迭代时将属性设置为 a 标签

async function getQuote() {
    loadingSpinner();
    const API = 'https://tronalddump.io/random/quote';

    try {
        const response = await fetch(API);
        const data = await response.json();
        console.log(data.value)
        messageText.innerText = data.value;
        date.innerText = new Date(data.appeared_at).toDateString();
        // authorText.innerText = data._embedded.author[0].name;
        console.log(messageText)
        if (data.value.length > 120) {
            messageText.classList.add('long-quote');
        } else {
            messageText.classList.remove('long-quote');
        }

        completeSpinner();
    } catch (error) {
        // alert(error);
        getQuote();
    };
}

标签： javascripthtmljsonobjectdom

解决方案

您可以href在链接中设置属性。

例子：

var link = document.querySelector('.quote-text a'); 

link.href = data.url //Your JSON link property from the api.

推荐阅读