为什么一个数组显示而另一个不显示？答案

【问题标题】：Why does one array display and the other doesn't?为什么一个数组显示而另一个不显示？
【发布时间】：2019-04-06 14:26:22
【问题描述】：

我有一个包含对象 (order) 的数组和一个包含字符串 (test) 的数组。使用 jquery 我可以让test 输出到<div>，但不能为order 做同样的事情。

在传递给<div id="order"> 之前，我尝试使用console.log(order) 来确认那里有值。

这是我的代码：

var order = [];
var test = ["hello", "there"];

function updateCart(item) {
  var index = order.findIndex(i => i.id == item.id);
  if (index != -1) {
    order.splice(index, 1);
    order.push(item);
  } else {
    order.push(item);
  }
  console.log(order);
  console.log(test)
  $("#test").html(test);
  $("#order").html(order);

}

function plusOne(item) {
  if (item.qty < 10) {
    item.qty = item.qty + 1;
    document.getElementById((item.name).replace(/\s/g, '') + "Qty").innerHTML = item.qty;
  }
}

function minusOne(item) {
  if (item.qty > 0) {
    item.qty = item.qty - 1;
    document.getElementById((item.name).replace(/\s/g, '') + "Qty").innerHTML = item.qty;
  }
}

$("#HawaiianPlus").click(function() {
  plusOne(hawaiian);
  updateCart(hawaiian);
});

$("#HawaiianMinus").click(function() {
  minusOne(hawaiian);
  updateCart(hawaiian);
});

$("#NewYorkerPlus").click(function() {
  plusOne(newYorker);
  updateCart(newYorker);
});

$("#NewYorkerMinus").click(function() {
  minusOne(newYorker);
  updateCart(newYorker);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>
<div id="order"></div>

我的产品类如下所示，订单是一个包含这些产品实例的数组：

class Product {
    constructor(id, name, price, qty) {
    this.id = id;
    this.name = name;
    this.price = price; 
    this.qty = qty;
    }
}

【问题讨论】：

您希望$("#order").html(order); 究竟做什么？ .html() 函数将以默认方式将数组转换为字符串，这可能对您的应用程序没有任何实际用处。
老实说，我只是将其用作概念测试。我希望能够访问数组中的每个元素，比如 order[0].name 等
你能创建一个minimal reproducible example 来演示这个问题吗？您缺少要单击的按钮，以及 hawaiian 和 newYorker 等变量的定义。
试试$("#order").html(JSON.stringify(order)) 展示一些更有用的东西。
谢谢你，JSON.stringify() 至少帮助我看到了更有用的东西。我将发布一个单独的问题，该问题的定义更明确，并且有更好的示例。

标签： javascript jquery arrays

【解决方案1】：

假设您的订单数组中有一些合理的值，例如：

[
    {name: "book", value: "5"},
    {name: "cd", value: "6"},
    {name: "spray", value: "8"},
    {name: "pen", value: "1"},
]

按照评论部分的建议，您可以将其放入html中

$("#order").html(order);

如果你只想要名字，那么你可以这样做：

$("#order").html(JSON.stringify(order.map(item => item.name)));

甚至换行：

$("#order").html(JSON.stringify(order.map(item => item.name).join("\n")));

【讨论】：