キャッチされていないエラーのためにテーブル内の要素が読み取られない

Question

テーブルに重複する要素がある場合、それらを非表示にしたいと思っているプロジェクトにはとても不満です。重複は問題なく見つけました。重複を隠そうとすると、問題が始まります。私はフレームワークやライブラリなしでバニラJavaScriptを使用しています。このエラーは本当に解読するのが難しいです。

Uncaught Type Error: Cannot read property 'e' of undefined

eテーブル

における最初の重複要素である私は私のHTML内の任意のハードコーディングされたデータを持っていない - それはすべてのJavaScriptです。私はこれまで何もディスプレイをしていませんでしたので、私はいくつかの助けを手に入れたいと思っていました。私のコードは以下の通りです。

事前にヘルプを評価してください。

var data = [ 
 
    ['e', 0, 1, 2, 3, 4], 
 
    ['a', 54312, 235, 5, 15, 4], 
 
    ['a', 6, 7, 8, 9, 232], 
 
    ['a', 54, 11235, 345, 5, 6], 
 
    ['b', 0, 1, 2, 3, 4], 
 
    ['b', 54312, 235, 5, 15, 4], 
 
    ['c', 62, 15, 754, 93, 323], 
 
    ['d', 27, 11235, 425, 18, 78], 
 
    ['d', 0, 1, 2, 3, 4], 
 
    ['d', 54312, 235, 5, 15, 4], 
 
    ['e', 6, 7, 8, 9, 232], 
 
    ['e', 54, 11235, 345, 5, 6], 
 
    ['e', 0, 1, 2, 3, 4], 
 
    ['e', 54312, 235, 5, 15, 4], 
 
    ['e', 62, 15, 754, 93, 323], 
 
    ['e', 27, 11235, 425, 18, 78] 
 
]; 
 

 

 

 

 

 
//Create a HTML Table element. 
 
var table = document.createElement("TABLE"); 
 
var elems = document.getElementsByClassName("tableRow"); 
 

 

 
//Get the count of columns. 
 
var columnCount = data[0].length; 
 

 

 
//Add the data rows. 
 

 
for (var i = 0; i < data.length; i++) { 
 
    var row = table.insertRow(-1); 
 
    for (var j = 0; j < columnCount; j++) { 
 
    //Searching for duplicates    
 
    var num = data[i][0]; 
 
    for (var otherRow = i + 1; otherRow < data.length; otherRow++) { 
 
     var dup = data[otherRow][0]; 
 
     console.log("What is the dup" + dup); 
 
     if (num === dup) { 
 
     console.log("duplicate"); 
 
     elems.data[dup].style.display = "none"; 
 

 
     } 
 
    } 
 

 

 
    var cell = row.insertCell(-1); 
 
    cell.innerHTML = data[i][j]; 
 
    cell.innerHtml = myZero; 
 

 
    } 
 
} 
 

 

 
var dvTable = document.getElementById("dvTable"); 
 
dvTable.innerHTML = ""; 
 
dvTable.appendChild(table);

Answer 1

あなたは、重複排除を分離し、実際にあなたのデータから要素を作成することができます。 Array.filterを使用すると、すべての重複を削除できるため、挿入するときに重大な心配はありません。

var data = [ 
 
    ['e', 0, 1, 2, 3, 4], 
 
    ['a', 54312, 235, 5, 15, 4], 
 
    ['a', 6, 7, 8, 9, 232], 
 
    ['a', 54, 11235, 345, 5, 6], 
 
    ['b', 0, 1, 2, 3, 4], 
 
    ['b', 54312, 235, 5, 15, 4], 
 
    ['c', 62, 15, 754, 93, 323], 
 
    ['d', 27, 11235, 425, 18, 78], 
 
    ['d', 0, 1, 2, 3, 4], 
 
    ['d', 54312, 235, 5, 15, 4], 
 
    ['e', 6, 7, 8, 9, 232], 
 
    ['e', 54, 11235, 345, 5, 6], 
 
    ['e', 0, 1, 2, 3, 4], 
 
    ['e', 54312, 235, 5, 15, 4], 
 
    ['e', 62, 15, 754, 93, 323], 
 
    ['e', 27, 11235, 425, 18, 78] 
 
]; 
 

 

 
var alreadyFound = []; 
 

 
data = data.filter(function(item, pos, arr) { 
 
    var key = item[0]; 
 
    // If we have already found this character, then skip. 
 
    if (alreadyFound.indexOf(key) > -1) return false; 
 
    // Otherwise, add this char to alreadyFound and include the item. 
 
    alreadyFound.push(key); 
 
    return true; 
 
}); 
 

 

 
//Create a HTML Table element. 
 
var table = document.createElement("TABLE"); 
 
var elems = document.getElementsByClassName("tableRow"); 
 

 

 
//Get the count of columns. 
 
var columnCount = data[0].length; 
 

 

 
//Add the data rows. 
 

 
for (var i = 0; i < data.length; i++) { 
 
    var row = table.insertRow(-1); 
 
    for (var j = 0; j < columnCount; j++) { 
 
    var cell = row.insertCell(-1); 
 
    cell.innerHTML = data[i][j]; 
 
    } 
 
} 
 

 

 
var dvTable = document.getElementById("dvTable"); 
 
dvTable.innerHTML = ""; 
 
dvTable.appendChild(table);

<div id="dvTable"></div>

Answer 2

私はレッドマーキュリーに同意します。まずアレイ内の複製を削除する必要があります。 赤い水銀の答えは完全に有効ですが、ここでは、私がそのようなものに使用している、汚い素早い多次元配列の重複排除関数です。

var data = [ 
    ['e', 0, 1, 2, 3, 4], 
    ['a', 54312, 235, 5, 15, 4], 
    ['a', 6, 7, 8, 9, 232], 
    ['a', 54, 11235, 345, 5, 6], 
    ['b', 0, 1, 2, 3, 4], 
    ['b', 54312, 235, 5, 15, 4], 
    ['c', 62, 15, 754, 93, 323], 
    ['d', 27, 11235, 425, 18, 78], 
    ['d', 0, 1, 2, 3, 4], 
    ['d', 54312, 235, 5, 15, 4], 
    ['e', 6, 7, 8, 9, 232], 
    ['e', 54, 11235, 345, 5, 6], 
    ['e', 0, 1, 2, 3, 4], 
    ['e', 54312, 235, 5, 15, 4], 
    ['e', 62, 15, 754, 93, 323], 
    ['e', 27, 11235, 425, 18, 78] 
]; 

function multiDimlUniq(arr) { 
    var uniques = []; 
    var founds = {}; 
    for (var i = 0, l = arr.length; i < l; i++) { 
     var s = JSON.stringify(arr[i]); 
     if (founds[s]) { 
      continue; 
     } 
     uniques.push(arr[i]); 
     founds[s] = true; 
    } 
    return uniques; 
} 

var reduced = multiDimlUniq(data)