使用 javascript 变量值填充特定的 html 元素

Question

我有一个 JS 函数，它计算对象数组中的重复键并打印键（类别名称）和重复键的数量。

我想要做的是遍历一组具有特定类的 html 元素并打印其中的值。

这是我要实现的 HTML

<table>
   <th>Category name</th>
   <th>Category count</th>
      <tr>
         <td class="cat_name">Shoes</td>
         <td class="cat_amount">2</td>
      </tr>
      <tr>
         <td class="cat_name">Shirts</td>
         <td class="cat_amount">1</td>
      </tr>
      <tr>
         <td class="cat_name">Hats</td>
         <td class="cat_amount">3</td>
      </tr>
</table>

这是迄今为止我使用 javascript 函数所取得的成果。

   <table>
   <th>Category name</th>
   <th>Category count</th>
      <tr>
         <td class="cat_name">Shoes</td>
         <td class="cat_amount">2</td>
      </tr>
      <tr>
         <td class="cat_name">Shoes</td>
         <td class="cat_amount">2</td>
      </tr>
      <tr>
         <td class="cat_name">Shoes</td>
         <td class="cat_amount">2</td>
      </tr>
</table>

所以基本上我可能应该以某种方式循环遍历所有元素和所有值并单独注入值，但我不知道如何。

我的代码：

var myObject = [
  {
    "product": "Tennis shoes",
    "price": "10€",
    "categoryname": "Shoes"
  },
  {
    "product": "High heels",
    "price": "40€",
    "categoryname": "Shoes"
  },
  {
    "product": "Basic shirt",
    "price": "20€",
    "categoryname": "Shirts"
  },
  {
    "product": "Huge Cap",
    "price": "15€",
    "categoryname": "Hats"
  },
  {
    "product": "Mage hat",
    "price": "25€",
    "categoryname": "Hats"
  },
  {
    "product": "Wizard hat",
    "price": "45€",
    "categoryname": "Hats"
  }
];
function countCategorynames() {
   var counter = {};
   for (var i = 0; i < myObject.length; i += 1) {
counter[this.myObject[i].categoryname] = (counter[this.myObject[i].categoryname] || 0) + 1;
   }
   for (var key in counter) {
      if (counter[key] > 0) {
         console.log("we have ", key, " duplicated ", counter[key], " times");

         var el1 = document.getElementsByClassName('cat_name');
         for (var i = 0; i < el1.length; i++) {
            el1[i].innerHTML = key;
         }//for
         var el2 = document.getElementsByClassName('cat_amount');
         for (var i = 0; i < el2.length; i++) {
            el2[i].innerHTML = counter[key];
         }//for
      }//if
   }// for
}// function

<table>
   <th>Category name</th>
   <th>Category count</th>
      <tr>
         <td class="cat_name"></td>
         <td class="cat_amount"></td>
      </tr>
      <tr>
         <td class="cat_name"></td>
         <td class="cat_amount"></td>
      </tr>
      <tr>
         <td class="cat_name"></td>
         <td class="cat_amount"></td>
      </tr>
</table>
<button onClick="countCategorynames()">Count</button>

Answer 1

你在正确的轨道上。下面是一种循环遍历值并将它们插入到表中的方法的示例。

// declaration of myObject for this example
var myObject = [{
    "categoryname": "Shoes"
  },
  {
    "categoryname": "Shoes"
  },
  {
    "categoryname": "Shirts"
  },
  {
    "categoryname": "Hats"
  },
  {
    "categoryname": "Hats"
  },
  {
    "categoryname": "Hats"
  }
];

var el1 = document.getElementsByClassName('cat_name');
var el2 = document.getElementsByClassName('cat_amount');

function countCategorynames() {
  var counter = {};
  for (var i = 0; i < myObject.length; i++) {
    counter[myObject[i].categoryname] = (counter[myObject[i].categoryname] || 0) + 1;
  }

  var j = 0; // variable to use as a counter for the table

  for (var key in counter) {
    if (counter[key] > 0) {
      console.log("we have ", key, " duplicated ", counter[key], " times");
      //This prints out each categoryname and the amount of duplicates
      //for example 
      //we have Shoes duplicated 2 times
      //we have Shirts duplicated 1 times etc...
      el1[j].innerHTML = key;
      el2[j++].innerHTML = counter[key]; // increment the counter
    }
  }
}

countCategorynames();

<table>
  <th>Category name</th>
  <th>Category count</th>
  <tr>
    <td class="cat_name"></td>
    <td class="cat_amount"></td>
  </tr>
  <tr>
    <td class="cat_name"></td>
    <td class="cat_amount"></td>
  </tr>
  <tr>
    <td class="cat_name"></td>
    <td class="cat_amount"></td>
  </tr>
</table>

从您目前的代码中看，myObject 似乎是一个对象数组；您可能需要考虑重命名它。如果它不是一个数组，那么您需要使用键而不是 .length 属性来循环遍历它。

您多次声明 el1 和 el2，这并没有真正错误，但不需要这样做。您可以声明一次变量并在每次迭代中引用它们，因为节点列表中的元素不会改变。

按照您的设置方式，您每次都获取类别名称和编号的最后一个值，因此这是唯一被应用的值。您的代码正朝着正确的方向前进；只是时机不对。

Answer 2

您正在运行以嵌入 html 的两个 for 循环都在错误的位置。它们将始终运行并最终将最后一个值更新为您的 html。

你需要在代码中做一些修改，如下：

function countCategorynames(myObject) {
  var counter = {};
  for (var i = 0; i < myObject.length; i += 1) {
    counter[myObject[i].categoryname] = (counter[myObject[i].categoryname] || 0) + 1;
  }
        var el1 = document.getElementsByClassName('cat_name');
      var el2 = document.getElementsByClassName('cat_amount');
  for (var key in counter) {
    if (counter[key] > 0) {
      console.log("we have ", key, " duplicated ", counter[key], " times");
      //This prints out each categoryname and the amount of duplicates
      //for example 
      //we have Shoes duplicated 2 times
      //we have Shirts duplicated 1 times etc...


      //This is my attempt to get all elements with class 
      //'cat_name' and 'cat_amount'
      //and populate them with values from the object
    	el1[i].innerHTML = key;
	    el2[i].innerHTML = counter[key];

    }
  }
}