时间戳

首页 > 解决方案 > 从 JSON 响应中获取图像

javascript - 从 JSON 响应中获取图像

问题描述

我正在开发一个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: key is not defined

更新

我已经能够最小化我的代码并且错误已被删除，但是第一个图像被发送并循环了。

    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);
        });

标签： javascriptapifetch-api

解决方案

为了合作，这不是您描述的案例的解决方案，但我认为它可以让我们走上解决问题的轨道

注释为 helpers 的方法获取 each 的文本和 eachlineNumber的值，src将imglink它们作为数组进行操作，从而解决我评论的问题for-in

在成功的获取响应中，我不清楚您在尝试什么，我知道在这一行中product_id == arrayOfLineNumbers [key]，您想要检查数组中是否有等于的值，arrayOfLineNumbers如果是这种情况，则此行将实现您的目标arrayOfLineNumbers.includes(product_id)

最后在这一行中，arrayOfimgSrc[key] = product_image;您的意图尚不清楚

  1. 键在此上下文中不存在
  2. 如果是这种情况，您必须使用 push 方法，该行会尝试将 product_image 分配给数组

正如我在开始时提到的，这并不是一个解决方案，但也许通过纠正一些事情并评论我们可以达到解决方案的疑虑

// helpers
const toTextContent = (element) => element.textContent;

const toSrc = (element) => element.src;

const nodesToArray = (nodes) => Array.from(nodes);

const getTextContent = (nodes) => nodesToArray(nodes).map(toTextContent);

const getSrc = (nodes) => nodesToArray(nodes).map(toSrc);

// collections
const arrayOfLineNumbers = getTextContent(
  document.querySelectorAll("#lineNumber")
);

const arrayOfimgSrc = getSrc(document.querySelectorAll("#imglink"));

// ajax
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) => response.json())
  .then((data) => {
    data.products.forEach((product) => {
      let product_id = product.id;
      let product_image = product.image.src;

      if (arrayOfLineNumbers.includes(product_id)) {
        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);
  });

推荐阅读