我在显示随机选择的对象时遇到问题

I am having trouble displaying the random object and the properties of that random object. The goal of this project is to have a list of stockItems, and when I press a button, it selects a determined number of those objects and displays them in an HTML p tag. Right now when I try to display it, it prints out as [object]. The goal is to have the properties of the selected object on different lines.

我在显示随机对象和该随机对象的属性时遇到问题。这个项目的目标是有一个stockItems列表,当我按下一个按钮时,它会选择确定数量的那些对象并将它们显示在HTML p标签中。现在,当我尝试显示它时,它打印为[对象]。目标是将所选对象的属性放在不同的行上。

Here is the code I am working with:

这是我正在使用的代码:

function buildShopItems(count) {
  var shopItems = [], i, itemIndex;
  count = stockItems.length < count ? stockItems.length : count;

  function getUniqueRandomItem() { //from stock
    var item;
    while (true) {
      item = stockItems[Math.floor(Math.random() * stockItems.length)];
      if (shopItems.indexOf(item) < 0) return item;
    }
  }

  for (i = 0; i < count; i++) {
    shopItems.push(getUniqueRandomItem());
  }
  return shopItems;
  console.log(shopItems);
}


var stockItems = [
  { item: "sword", type: "weapon", weight: "5 lbs.", cost: "10 gold" },
  { item: "hammer", type: "weapon", weight: "8 lbs.", cost: "7 gold" }
  //...
];


var shopItems = buildShopItems(1);


console.log(shopItems);

document.getElementById("item").innerHTML = shopItems.item;
document.getElementById("type").innerHTML = shopItems.type;
document.getElementById("weight").innerHTML = shopItems.weight;
document.getElementById("cost").innerHTML = shopItems.cost;

1 个解决方案

#1

The problem was with your usage of indexOf. You can use indexOf to search for an object because in javascript you can't compare object using == or === and indexOf uses ===. Also made some syntax updates for you.

问题在于你使用indexOf。您可以使用indexOf搜索对象,因为在javascript中您无法使用==或===来比较对象,而indexOf使用===。还为您做了一些语法更新。

'use strict'

const stockItems = [
  { item: "sword", type: "weapon", weight: "5 lbs.", cost: "10 gold" },
  { item: "hammer", type: "weapon", weight: "8 lbs.", cost: "7 gold" }
];

function isEquivalent(a, b) {
    // Create arrays of property names
    const aProps = Object.getOwnPropertyNames(a);
    const bProps = Object.getOwnPropertyNames(b);

    // If number of properties is different,
    // objects are not equivalent
    if (aProps.length != bProps.length) {
        return false;
    }

    for (let i = 0; i < aProps.length; i++) {
        const propName = aProps[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;
}

// normal indexof will not work with object because it uses strict equality
function myIndexOf(array, object) {    
    for (let i = 0; i < array.length; i++) {
        if (isEquivalent(array[i], object)) return i;
    }
    return -1;
}

function getUniqueRandomItem(shopItems) { //from stock
  var item;
  while (true) {
    item = stockItems[Math.floor(Math.random() * stockItems.length)];
    if (myIndexOf(shopItems, item) < 0) return item;
  }
}

function buildShopItems(count) {
  count = stockItems.length < count ? stockItems.length : count;
  const shopItems = [];

  for (let i = 0; i < count; i++) {
    const item = getUniqueRandomItem(shopItems);
    shopItems.push(item);
  }

  return shopItems;
}

const shopItems = buildShopItems(1);


console.log(shopItems);