使用XMLHttpRequest方法将JSON文件中的“href-link”提取到javascript中

vltsax25  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(124)

我正在尝试使用javascript和JSON动态加载我的卡片数据。一切正常,加载标题,描述等。现在我遇到了这个问题,我尝试为每张卡片动态添加一个单独的链接(这似乎不像我想象的那样工作。)
这是我的html:

<div class="navbar__container"></div>

这是我用来让它工作的javascript:

let http = new XMLHttpRequest();
http.open('get', 'products.json', true);
http.send();
http.onload = function () {
    if (this.readyState == 4 && this.status == 200) {
        let products = JSON.parse(this.responseText);
        let output = "";
        for (let item of products) {
            output += `
            <div class="product">
               <img class="products__img" src="${item.image}" alt="${item.description}">
               <p class="products__title">${item.title}</p>
               <a href="${item.link}" class="products__link">Check it out!</a>
               <p class="products__usedTechnologies">USED TECHNOLOGIES</p>
               <p class="products__description">${item.description}</p>
            </div>
         `;
        }
        document.querySelector(".products").innerHTML = output;
    }
}

这是JSON文件:

{
    "image": "json-images/exampleImg.png",
    "title": "This is an example",
    "description": "html, css, javascript, three.js, webGL, node.js",
    "link": "href=https://bitcoin.org/nl/"
},

为了让事情变得清楚,除了从json-file动态加载链接之外,一切都正常,我觉得问题是基于我如何调用javascript文件中的“href”。
请看它的屏幕截图:
x1c 0d1x点击链接时出现的错误:

通常情况下,我是相当快的,就如何找出这样的事情,但这一直是我似乎无法修复的东西,所有的帮助是赞赏

oxcyiej7

oxcyiej71#

let http = new XMLHttpRequest();
http.open('get', 'products.json', true);
http.send();
http.onload = function () {
    if (this.readyState == 4 && this.status == 200) {
        let products = JSON.parse(this.responseText);
        let output = "";
        for (let item of products) {
            output += `
            <div class="product">
               <img class="products__img" src="${item.image}" alt="${item.description}">
               <p class="products__title">${item.title}</p>
               <a ${item.link} class="products__link">Check it out!</a>
               <p class="products__usedTechnologies">USED TECHNOLOGIES</p>
               <p class="products__description">${item.description}</p>
            </div>
         `;
        }
        document.querySelector(".products").innerHTML = output;
    }
}

你好,你犯了一个小错误,在你的代码中再次包含href属性,而你已经在json的link字段中包含了它。

相关问题