I have some JSON data that holds three items: kicker, headline, and link. I insert the kicker and the headline with some JS into the designated HTML tags that hold a variable which is called placeholder_1. The number at the end increases by one (placeholder_2, placeholder_3, placeholder_4).
var jsonData = [{
"kicker": "Turkey",
"headline": "Hatay hit by new 6.4-magnitude earthquake",
"link": "https://www.theguardian.com/world/2023/feb/20/turkey-new-6-point-4-magnitude-earthquake-hatay",
},
{
"kicker": "Israel",
"headline": "Benjamin Netanyahu accuses protesters of ‘trampling democracy’",
"link": "https://www.theguardian.com/world/2023/feb/20/israel-benjamin-netanyahu-accuses-protesters-of-trampling-democracy",
},
{
"kicker": "Live",
"headline": "Russia-Ukraine war: Joe Biden’s surprise visit to Kyiv ‘unprecedented in modern times’, says US",
"link": "https://www.theguardian.com/world/live/2023/feb/20/russia-ukraine-war-live-updates-latest-news-foreign-ministers-eu-ammunition-deal",
},
{
"kicker": "Folly of Gossip",
"headline": "A look into Sydney’s early drag scene",
"link": "https://www.theguardian.com/artanddesign/gallery/2023/feb/20/folly-of-gossip-a-look-into-sydneys-early-drag-scene-in-pictures"
}
]
$(document).ready(function() {
var k = 1;
//loop through json data and insert into corresponding divs
for (var i = 0; i < jsonData.length; i++) {
document.getElementById("placeholder_" + (k)).innerText = jsonData[i].kicker;
document.getElementById("placeholder_" + (k = k + 1)).innerText = jsonData[i].headline;
document.getElementById("placeholder_" + (k = k + 1)).href = jsonData[i].link;
k = k + 1;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<section>
<div class="headlines">
<div class="section-title">
<h1 class="opinion-kk">Opinion</h1>
</div>
<div class="articles main-stories">
<img src="https://picsum.photos/300/200?random=1">
<div>
<p class="main-title">placeholder_1 / <a href="placeholder_3">placeholder_2</a></p>
<p class="mainPara">Temporibus et repudiandae neque.</p>
</div>
class="sub-title"><strong>Et /</strong> <a href="#">Consectetur debitis non et amet eum</a></p>
</div>
<div class="articles secondary-stories add-subtitle">
<img src="https://picsum.photos/300/200?random=2">
<p class="secondary-title"><strong>placeholder_4 /</strong> <a href="placeholder_6">placeholder_5</a></p>
<p class="sub-title"><strong>Ut /</strong> <a href="#">Quia tempora iste sed dolorem</a></p>
</div>
<div class="articles secondary-stories">
<img src="./assets/img/s_493.jpg">
<p><strong>placeholder_7 /</strong> <a href="placeholder_9">placeholder_8</a></p>
</div>
</div>
</section>
</header>But I fail to insert the link in the href tag in the correct way.
The problem is that these placeholders in your code are not ids, but simple text. I changed that (using 1 only id for the links, for both content and href attribute) and now it works perfectly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>News | Modx 3.0.3 </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./assets/css/custom.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js">
</script>
<link href="./assets/img/favi.png" rel="icon" sizes="any" type="image/png">
</head>
<body id="top">
<header>
<section>
<div class="headlines">
<div class="section-title">
<h1 class="opinion-kk">Opinion</h1>
</div>
<div class="articles main-stories">
<img src="https://picsum.photos/300/200?random=1">
<div>
<p class="main-title"><strong id="placeholder_1"></strong><a id="placeholder_2"></a></p>
<p class="mainPara">Temporibus et repudiandae neque.</p>
</div>
<p class="sub-title"><strong>Et /</strong> <a href="#">Consectetur debitis non et amet eum</a></p>
</div>
<div class="articles secondary-stories add-subtitle">
<img src="https://picsum.photos/300/200?random=2">
<p class="secondary-title"><strong id="placeholder_3"></strong><a id="placeholder_4"></a></p>
<p class="sub-title"><strong>Ut /</strong> <a href="#">Quia tempora iste sed dolorem</a></p>
</div>
<div class="articles secondary-stories">
<img src="./assets/img/s_493.jpg">
<p><strong id="placeholder_5"></strong><a id="placeholder_6"></a></p>
</div>
</div>
</section>
</header>
<script>
var jsonData = [
{
"kicker": "Turkey",
"headline": "Hatay hit by new 6.4-magnitude earthquake",
"link": "https://www.theguardian.com/world/2023/feb/20/turkey-new-6-point-4-magnitude-earthquake-hatay",
},
{
"kicker": "Israel",
"headline": "Benjamin Netanyahu accuses protesters of ‘trampling democracy’",
"link": "https://www.theguardian.com/world/2023/feb/20/israel-benjamin-netanyahu-accuses-protesters-of-trampling-democracy",
},
{
"kicker": "Live",
"headline": "Russia-Ukraine war: Joe Biden’s surprise visit to Kyiv ‘unprecedented in modern times’, says US",
"link": "https://www.theguardian.com/world/live/2023/feb/20/russia-ukraine-war-live-updates-latest-news-foreign-ministers-eu-ammunition-deal",
},
{
"kicker": "Folly of Gossip",
"headline": "A look into Sydney’s early drag scene",
"link": "https://www.theguardian.com/artanddesign/gallery/2023/feb/20/folly-of-gossip-a-look-into-sydneys-early-drag-scene-in-pictures"
}
]
$(document).ready(function () {
var k = 1;
//loop through json data and insert into corresponding divs
for (var i = 0; i < jsonData.length; i++) {
document.getElementById("placeholder_" + (k)).innerText = jsonData[i].kicker;
document.getElementById("placeholder_" + (k = k + 1)).innerText = jsonData[i].headline;
document.getElementById("placeholder_" + (k)).href = jsonData[i].link;
k = k + 1;
}
});
</script>
</body>
</html>