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


0

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

更多相关文章

  1. 如何在JavaScript / jQuery中获取对象的属性?
  2. 令人惊奇的JavaScript面向对象(一)
  3. JavaScript面向对象程序设计三——原型模式(上)
  4. 迭代angularjs中对象中的属性列表
  5. Safari / Chrome中的全局控制台对象被重置
  6. 如何判断字符串是一个字符串化的JSON对象
  7. 错误对象,本机和自定义,如何区分?
  8. MVC jquery。无法获取未定义或空引用的属性“className”的dataT
  9. 在angularjs中动态添加/删除checked属性到checkbox复选框

随机推荐

  1. 技术解析:如何用pyecharts绘制时间轮播图
  2. 武大樱花又盛开,用python画一棵樱花树
  3. python数据分析万字干货!一个数据集全方位
  4. 【决战西二旗】|Redis面试热点之底层实现
  5. 【Python】一文说清楚类与函数的选择
  6. 更高级的数据可视化,使用pyecharts制作精
  7. 小鹿专属福利 | 周末解答 + 给读者送书
  8. 动画:面试官问我如何在 20 万 IP 地址中快
  9. 如何正确对待伸手党和杠精
  10. 1-21