使 JSON 文件的属性在需要时可单击

Posted 2023-02-22

【中文标题】使 JSON 文件的属性在需要时可单击

【英文标题】：Making a property of a JSON file clickeable when need it

【发布时间】：2021-01-29 20:33:58

【问题描述】：

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

这是我的 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();
    ;

【参考方案1】：

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

例子：

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

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