Question

我正在使用YUI DataTables来填充我想要从外部动态发送列及其值的数据表，因为我已经编写了以下代码：

<html>
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<div class="example yui3-skin-sam" id="simple"> <!-- You need this skin class -->
</div>

<script>
var cols = ["id", "name", "price"];
var obj = {
    id: "",
    name: "",
    price: ""
};
var data2 = new Array();
obj.id = "ga";
obj.name = "gadget";
obj.price = "$6.99";
data2.push(obj);
obj.id = "ga2";
obj.name = "gadget2";
obj.price = "$7.99";
data2.push(obj);
obj.id = "ga3";
obj.name = "gadget3";
obj.price = "$8.99";
data2.push(obj);
YUI().use("datatable", function (Y) {
    // A table from data with keys that work fine as column names
    var simple = new Y.DataTable({
        columns: cols,
        data   : data2,
        summary: "Price sheet for inventory parts",
        caption: "Example table with simple columns"
    });

    simple.render("#simple");

});
</script>
</html>

现在的问题是，它只显示了data2中推送的最后一个obj ..请告诉我为什么它不显示所有三个obj。此代码中生成的表是

id      name    price

ga3   gadget3   $8.99

Answer 1

它将提供所有数组值

function obj(id, name, price) {
     this.id = id;
     this.name = name;
     this.price = price;
 }

 var array = new Array();

 var point = new obj("ga", "gadget", "$6.99");

 array.push(point);

 var point = new obj("ga2", "gadget2", "$7.9");

 array.push(point);

Answer 2

上述两个答案（2480125，2480125）都可以使用，但它们要求您为添加到数组中的每个新对象手动输入新对象的属性。

您可以使用for..in循环（docs）来避免这种不灵活性：

var newObj = function(object) {
  var newObject = {};
  for (var key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] = object[key];
    }
  }
  return newObject;
};

var obj = {
  id: 'foo',
  name: 'gadget',
  price: '$6.99'
};

data2 = [];

data2.push( newObj(obj) );

obj.id = 'bar';
obj.name = 'baz';
obj.price = '$4.44';

data2.push( newObj(obj) );

console.log(data2);
data2.forEach(function(item){
  console.log("%s, %s, %s", item.id, item.name, item.price);
});
// data2 now contains two distinct objects, rather than one object reference added to the array twice.

上述代码

JSFiddle

Answer 3

Objects是参考对象。

obj.id = "ga";
obj.name = "gadget";
obj.price = "$6.99";
data2.push(obj);

obj.id = "ga2";
obj.name = "gadget2";
obj.price = "$7.99";
data2.push(obj);

这意味着当您第二次更新obj时，您实际上正在更新对该对象的所有引用。

如果你检查了data2数组，你会发现它有3个元素且所有元素都相同。

尝试将代码更新为此类

data2.push({
    id : "ga",
    name : "gadget",
    price : "$6.99"
});
data2.push{(
    id : "ga2",
    name : "gadget2",
    price : "$7.99"
)};
data2.push({
    id : "ga3",
    name : "gadget3",
    price : "$8.99"
});

Answer 4

这些答案都不适合我，我无法解释它为什么会起作用，但为我推内联的元素添加一个字符值是我能让它正常工作的唯一方法。我尝试了创建新对象的建议，甚至只是创建新变量并推送新对象或新变量但无济于事，它只是在推动一个新元素时重写数组的每个元素，这样整个数组就会每次都是循环的最终值。所以最后这是我必须做的才能让它发挥作用：

var returnArray = [];
while(...){
    returnArray.push('' + obj.value);
}

Answer 5

不知道这是否有意义，但是如果人们仍然来这里寻找简单的解决方案...

只需将对象字符串化并进行JSON。再次解析它以复制它，而不是像这样引用该对象;

data2.push(JSON.parse(JSON.stringify(obj)));

在数组中推送对象仅返回推送的最后一个对象

5 个答案: