特定のhtml要素にjavascriptの変数値を設定する

Question

オブジェクト配列から重複キーを数え、キー（カテゴリ名）と重複キーの量を出力するJS関数があります。

私がしたいことは、特定のクラスを持つ一連の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> 

を達成したいHTMLであり、ここで私は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> 

だから、基本的に私はおそらく何らかの形でループのすべての要素とすべての値を通って、個別に値を挿入する必要がありますが、私は方法がわかりません。

マイコード：あなたがHTMLを埋め込むために実行しているループの

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複数回、宣言しました。ノードリスト内の要素は変更されていないため、変数を1回宣言して各反復で参照することができます。

あなたが設定したやり方では、カテゴリ名と番号の両方の最後の値を毎回取得していたので、それが適用された唯一の値です。あなたのコードは正しい方向に向かっていました。それはオフのタイミングだった。

Answer 2

両方が間違った場所にある...それらは常に実行され、最終的にあなたの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 
 
    \t el1[i].innerHTML = key; 
 
\t  el2[i].innerHTML = counter[key]; 
 

 
    } 
 
    } 
 
}