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

我有一个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>

类别名称
类别计数
鞋
2.
衬衫
1.
帽子
3.

下面是我迄今为止通过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>

类别名称
类别计数
鞋
2.
鞋
2.
鞋
2.

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

我的代码：

var myObject=[
{
“产品”：“网球鞋”，
“价格”：“10欧元”，
“类别名称”：“鞋”
},
{
“产品”：“高跟鞋”，
“价格”：“40欧元”，
“类别名称”：“鞋”
},
{
“产品”：“基本衬衫”，
“价格”：“20欧元”，
“类别名称”：“衬衫”
},
{
“产品”：“大帽子”，
“价格”：“15欧元”，
“类别名称”：“帽子”
},
{
“产品”：“法师帽”，
“价格”：“25欧元”，
“类别名称”：“帽子”
},
{
“产品”：“巫师帽”，
“价格”：“45欧元”，
“类别名称”：“帽子”
}
];
函数countCategorynames（）{
var计数器={}；
对于（变量i=0；i0）{
log（“我们有”，键，“复制”，计数器[键]，“时间”）；
var el1=document.getElementsByClassName（'cat_name'）；
对于（变量i=0；i

类别名称
类别计数
为嵌入html而运行的两个循环都在错误的位置进行计数。。这些将始终运行并最终更新html的最后一个值

您需要对代码进行如下更改：


函数countCategorynames（myObject）{
var计数器={}；
对于（变量i=0；i0）{
log（“我们有”，键，“复制”，计数器[键]，“时间”）；
//这将打印出每个categoryname和重复的数量
//比如说
//我们的鞋子复制了两次
//我们有重复1次的衬衫等。。。
//这是我试图用类获取所有元素的尝试
//“类别名称”和“类别金额”
//并使用对象中的值填充它们
el1[i].innerHTML=key；
el2[i].innerHTML=计数器[key]；
}
}
}
你的思路是对的。下面是一个循环遍历值并将其插入表的方法示例


//本例中myObject的声明
变量myObject=[{
“类别名称”：“鞋”
},
{
“类别名称”：“鞋”
},
{
“类别名称”：“衬衫”
},
{
“类别名称”：“帽子”
},
{
“类别名称”：“帽子”
},
{
“类别名称”：“帽子”
}
];
var el1=document.getElementsByClassName（'cat_name'）；
var el2=document.getElementsByClassName（'cat_amount'）；
函数countCategorynames（）{
var计数器={}；
对于（变量i=0；i0）{
log（“我们有”，键，“复制”，计数器[键]，“时间”）；
//这将打印出每个categoryname和重复的数量
//比如说
//我们的鞋子复制了两次
//我们有重复1次的衬衫等。。。
el1[j].innerHTML=key；
el2[j++].innerHTML=计数器[key]；//递增计数器
}
}
}
countCategorynames（）

类别名称
类别计数
请单击
并创建一个，同时提供
myObject
的键和值。添加代码段和对象键和值非常好。现在这是一个+1谢谢你，这正是我想要实现的，也感谢你提供的详细信息！很乐意帮忙。JavaScript充满了容易混淆的细微差别。