使用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>

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

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;  

Answer 1

你走在正确的轨道上。以下是循环显示值并将其插入表格的一种方法示例。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

你设置它的方式，你每次都抓住类别名称和数字的最后一个值，这是唯一被应用的值。你的代码朝着正确的方向前进;这只是关闭时间。

Answer 2

你正在运行以嵌入html的for循环都在错误的位置..那些将始终运行并最终将最后一个值更新为你的html。

您需要对代码进行一些更改，如下所示：

＆＃13;

＆＃13;

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

    }
  }
}

＆＃13;

＆＃13;

＆＃13;