Question

我正在开发shopify主题。在我的主题内。我正在循环播放div。在div内，我有一个图片标签，我想在其中传递JSON文件中的图片 其中div ID ==到图像ID

在我的HTML文件中，有这个。

{% for order in customer.orders %}
{% for line_item in order.line_items %}
<span id="lineNumber">{{ line_item.product_id }}</span>
<div class="order-body">
    <div class="row order-single">
        <div class="col-12 col-md-3">
            <img src="" alt="logo" class="fit-image-product" id="imglink">
        </div>
...
{% endfor %}
{% else %}
<div class="container">
    <div class="lg-header">
        <h3>You are not Logged In</h3>
    </div>
</div>
{% endif %}

在我的脚本文件中，我有这个

const lineNumberElements = document.querySelectorAll("#lineNumber");
let arrayOfLineNumbers = [];

for (const key in lineNumberElements) {
  if (lineNumberElements.hasOwnProperty(key)) {
    const element = lineNumberElements[key];
    arrayOfLineNumbers.push(element.innerHTML);
  }
  console.log(arrayOfLineNumbers[key]);
}

const imgsrcElements = document.querySelectorAll("#imglink");
let arrayOfimgSrc = [];

for (const key in imgsrcElements) {
  if (imgsrcElements.hasOwnProperty(key)) {
    const element = imgsrcElements[key];
    arrayOfimgSrc.push(element.innerHTML);
  }
  console.log(arrayOfimgSrc[key]);
}

const geturl = `https://website.myshopify.com//admin/api/2020-04/products.json`;

fetch(geturl, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    "X-Shopify-Access-Token": "shppa_###################",
  },
})
  .then((response) => {
    //  console.log('resolved', response);
    return response.json();
  })
  .then((data) => {
    let allproducts = data.products;
    console.log(allproducts);
    allproducts.forEach(function (product) {
      let product_id = product.id;
      let product_image = product.image.src;
      //console.log(product_id);
      if (product_id == arrayOfLineNumbers[key]) {
        console.log("how far", product_id, product_image);
        arrayOfimgSrc[key] = product_image;
      }
    });
  })
  .catch((error) => {
    console.error("There has been a problem with your operation:", error);
  });

我不断收到错误消息

您的操作出现问题：ReferenceError：键未定义

更新

我已经能够将代码最小化，并且错误已被消除，但是第一张图像已发送并循环显示。

    const lineNumberElements = document.querySelectorAll('#lineNumber');
    const imgsrcElements = document.querySelectorAll('#imglink');
    const geturl = `https://beymossweb.myshopify.com//admin/api/2020-04/products.json`
    fetch(geturl, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-Shopify-Access-Token": "shppa_#############",
            }
        })
        .then((response) => {
            return response.json();
        })
        .then(data => {
            let allproducts = data.products
            console.log(allproducts)
            allproducts.forEach(function (product) {
                let product_id = product.id
                let product_image = product.image.src
                console.log(product_id, product_image);
                for (let j = 0; j <= imgsrcElements.length; j++) {
                    imgsrcElements[j].src = product_image;
                }
            });
        })
        .catch(error => {
            console.error('There has been a problem with your operation:', error);
        });

Answer 1

为了进行协作，这不是您所描述情况的解决方案，但我认为它可以使我们走上解决之路

被注释为助手的方法获得每个lineNumber的文本和每个src的{{1}}的值，将它们作为数组进行操作，从而解决了我对{{1 }}

在成功的获取响应中，我不清楚您要尝试什么，我知道在这一行imglink中，您要检查的是数组中是否有等于for-in的值，如果这行将达到您的目标product_id == arrayOfLineNumbers [key]

最后一行arrayOfLineNumbers中，您的意图不明确

密钥在这种情况下不存在
如果必须使用push方法，则该行尝试将product_image分配给数组

正如我在开始时提到的那样，这并不是要作为解决方案，而可能是通过更正某些问题并提出疑问以达到解决方案的目的

arrayOfLineNumbers.includes(product_id)

从JSON响应中获取图像

更新

1 个答案: