For Loop 在 Google 标签管理器的自定义 javascript 变量中不起作用

Question

我的网站没有数据层，我正在尝试抓取 DOM 元素以将一些数据传递给自定义 Javascript 变量。我是 HTML 和 Javascript 的新手，因此我似乎犯了一个错误。

多个产品的 For 循环不工作 - 我收到错误 - "Error at line 17, character 16: Parse error. '{' expected"

这是我的代码：

function() {
var a = document.querySelectorAll("p.product-name");
var b = document.querySelectorAll("small.cart_ref");
var c = document.querySelectorAll("input.cart_quantity_input.form-control.grey");
var d = document.querySelectorAll("li.price");
var ecommerceData = {
'ecommerce': {
  'purchase': {
    'actionField': {
    'id': {{Random Number}},                          // Transaction ID. Dummy
    'revenue': {{Revenue}},  // Total transaction value (incl. tax and shipping)
    'shipping': {{Shipping}}
    },
    'products': [
     for (var i = 0; i < b.length; i++) {
      'name': a[i+1].innerHTML,
      'id': b[i].innerHTML,
      'quantity': c[i].innerHTML,
      'price': d[i].innerHTML  
     },
     ]
}
};
return ecommerceData;
}

如果我使用没有 For 循环的代码，它会起作用：

function() {
var a = document.querySelectorAll("p.product-name");
var b = document.querySelectorAll("small.cart_ref");
var c = document.querySelectorAll("input.cart_quantity_input.form-control.grey")
var d = document.querySelectorAll("li.price");
var e = c.value;
var ecommerceData = {
'ecommerce': {
  'purchase': {
    'actionField': {
    'id': {{Random Number}},                          // Transaction ID. Dummy
    'revenue': {{Revenue}},  // Total transaction value (incl. tax and shipping)
    'shipping': {{Shipping}}
    },
    'products': [
      {
      {'name': a[1].innerHTML,
      'id': b[0].innerHTML,
      'quantity': e[0].innerHTML,
      'price': d[0].innerHTML  
      }
     ]
 }
}
};
return ecommerceData;
}

订单交易页面为www.decathlon.in/order.

Answer 1

这里有多个问题。

语法错误是您尝试使用 for 语句，其中需要 表达式（在数组初始值设定项中）。语句不是表达式。（表达式有时是语句，但反之则不然。）

for 循环的主体在语法上也是无效的。 for 循环的主体应该是一系列语句，但是您在那里编写了一系列属性初始化程序，就好像它们在对象初始化程序中一样。

如果你did执行你的for循环，它可能会失败，因为它依赖于可能不可靠的三件事：

a 中的元素总是比 b 多，因为你在做 a[i + 1].innerHTML。如果 a 的元素不多于 b，最终 a[i + 1] 将是 undefined，您将在 [=] 上尝试读取 innerHTML 时出错21=].
c 中的元素总是至少与 b 中的元素一样多；如果没有，最终您将尝试在 undefined.

innerHTML

d 中的元素总是至少与 b 中的元素一样多。

你的版本没有 for 的原因是你没有尝试将语句用作表达式，显然 a 至少有两个元素和 b 、c 和 d 显然都至少有一个元素。

如果您的目标是生成一个包含来自这些不同元素的条目的数组，您可以这样做：

'products': Array.prototype.map.call(b, function(bvalue, i) {
    return {
        name:     a[i + 1] && a[i + 1].innerHTML,
        id:       bvalue,
        quantity: c[i] && c[i].innerHTML,
        price:    d[i] && d[i].innerHTML
    };
}),

（我保留了上面的 a[i + 1] 理论上它确实是你想要做的......）

在 b 上调用 Array#map（详情请参阅 this answer）；结果将是一个由回调返回的值构建的数组。如果没有 c[i] 元素，c[i] && c[i].innerHTML 和类似的会给你 undefined。

Answer 2

不能在对象字面量中插入循环

单独创建产品数组。

var products = [];
for (var i = 0; i < b.length; i++) {
    var obj = {};
    obj.name = a[i+1].innerHTML;
    obj.id= b[i].innerHTML;
    obj.quantity= c[i].innerHTML;
    obj.price= d[i].innerHTML; 
    products.push(obj);
 }

然后将其添加到您的对象中

'products': products

For Loop 在 Google 标签管理器的自定义 javascript 变量中不起作用

For Loop not working in custom javascript variable for Google Tag Manager

javascript

jquery

for-loop

google-tag-manager