使 div 可点击到来自 JSON 的动态链接

Question

I'm trying to create a div with news articles and need my div to send the user to the new page referenced by the provided link from my JSON file.我正在尝试创建一个包含新闻文章的 div，并且需要我的 div 将用户发送到由我的 JSON 文件中提供的链接引用的新页面。 My issue is how can I properly reference the link from the JSON file, so when the json file updates, so does the directory.我的问题是如何正确引用 JSON 文件中的链接，因此当 json 文件更新时，目录也会更新。 (I'm still learning JS at the moment). （我现在还在学习 JS）。

JSON file: JSON 档案：

{
    "AUD": [
        {
            "title": "Pound Australian Dollar Exchange Rate News: GBP/AUD Rallies on Risk-Averse Market",
            "media": "TorFX News",
            "date": "7 mins ago",
            "link": "https://news.torfx.com/post/2022-12-29_pound-australian-dollar-exchange-rate-news-gbp-aud-rallies-on-risk-averse-market/"
        }
      ]
}

HTML & JS: HTML & 记者：

<!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">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    
    
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script>
    
</head>
<body>
    <div class="forex_news_container1">
        <div class="forex_news_containerAUD fxcontentNEWS">
            <div class="yooo" onclick="setCurrentLocation()" style="cursor: pointer;">
                send_to_new_page
            </div>
          
            <script>
                const requestUrl67 = 'https://api.npoint.io/b4841826d7668f639d10';
                const requestJSON67 = async url => {

                  const response67 = await (await fetch(url)).json();
                    function setCurrentLocation() {
                        var newloc = response67.AUD[0].link;
                        window.location.href = newloc;
                    }
                }
                requestJSON67(requestUrl67);
            </script>
        </div>
    </div>

If I were to change response67.AUD[0].link;如果我要更改response67.AUD[0].link; to the actual link, then it works fine.到实际链接，然后它工作正常。 Although it's not in my best interest to keep manually typing every single link for all news articles (there's a lot, this is just a snippet).尽管手动输入所有新闻文章的每个链接并不符合我的最佳利益（有很多，这只是一个片段）。

Answer 1

JS can't work directly with a JSON. You have to parse the JSON to an JS Object/Array by using the JSON.parse() function. JS 不能直接使用 JSON。您必须使用JSON.parse() function 将 JSON 解析为 JS 对象/数组。

you could change your line:你可以改变你的线路：

var newLoc = response67.AUD[0].link;

to this:对此：

var object = JSON.parse(response67);
var newLoc = object.AUD[0].link;

 let response = `{ "AUD": [{ "title": "Pound Australian Dollar Exchange Rate News: GBP/AUD Rallies on Risk-Averse Market", "media": "TorFX News", "date": "7 mins ago", "link": "https://news.torfx.com/post/2022-12-29_pound-australian-dollar-exchange-rate-news-gbp-aud-rallies-on-risk-averse-market/" }] }`; response = JSON.parse(response); console.log(response.AUD[0].link);

使 div 可点击到来自 JSON 的动态链接

问题描述

1 个解决方案

解决方案1
0 2022-12-31 12:42:25

使 div 可点击到来自 JSON 的动态链接

问题描述

1 个解决方案

解决方案1 0 2022-12-31 12:42:25

解决方案1
0 2022-12-31 12:42:25