JavaScriptでHTMLエンティティを反復処理する方法

Question

私は以下のHTMLを持っています。私はclass = "gmvcRow"を持つすべてのDOMを反復しようとしており、各 'gmvcRow'のすべての "gmvcCell"のテキストを取得しています。私はすべてのテキストを配列に入れたいと思っています（['firstname'、 'lastname'、 'dob'、 'city']）。そして、私はこの配列を "配列のgmvcRow"を保持する別の配列に配置したいと思います。私の試みは以下の通りですが、私はまだ成功していません。私は 'gmvcCell'のテキスト自体が別のラベルノードであることを理解しています。

<div class="gmvcRow"> 
     <div class="gmvcCell">firtname</div> 
     <div class="gmvcCell">lastname</div> 
     <div class="gmvcCell">dob</div> 
     <div class="gmvcCell">city</div> 
</div> 
<div class="gmvcRow"></div> 
<div class="gmvcRow"></div> 
<div class="gmvcRow"></div> 
<div class="gmvcRow"></div> 
<div class="gmvcRow"></div> 

私のコード：それはまた、テキストノードを選択するのでchildNodesを使用して

var gmvcRowArray = document.getElementsByClassName('gmvcRow'); 
console.log('number of records: ' + gmvcRowArray.length); 

// Master array 
var masterArray = []; 

// Iterate through array 
for(var i=0; i<gmvcRowArray.length; i++){ 
    // Iterate through all childNodes 
    var rowArray = []; 


    for(var c=0; c<gmvcRowArray[i].childNodes.length; c++){ 
     c = c + 1; // skip non text node 
     console.log('c: '+c); 

     if(gmvcRowArray[i].childNodes[c] != null){ 
      var value = gmvcRowArray[i].childNodes[c].innerHTML; 

      rowArray.push(value); 
      //console.log('rowArray.length: '+rowArray.length); 
      console.log('value: '+value); 
     } 


     c = c - 1; 
    } 
    // Add row to master array 
    masterArray.push(rowArray); 
    console.log('masterArray.lengh: '+masterArray.length); 
} 

Answer 1

は、必要以上にそれが難しくなります。 1レベルのネスト

var rows = Array.from(document.getElementById('container').querySelectorAll('.gmvcRow')); 

const result = rows.map(row => { 
    return Array 
     .from(row.querySelectorAll('.gmvcCell')) 
     .map(cell => cell.innerText); 
}); 

console.log(result); 

https://jsfiddle.net/snba2qsf/

ため

var arr = Array.from(document.querySelectorAll('.gmvcRow'), row => 
 
    Array.from(row.querySelectorAll('.gmvcCell'), cell => cell.textContent) 
 
); 
 

 
console.log(arr);

<div class="gmvcRow"> 
 
    <div class="gmvcCell">firstname</div> 
 
    <div class="gmvcCell">lastname</div> 
 
    <div class="gmvcCell">dob</div> 
 
    <div class="gmvcCell">city</div> 
 
</div> 
 
<div class="gmvcRow"> 
 
    <div class="gmvcCell">Helene</div> 
 
    <div class="gmvcCell">Johnson</div> 
 
    <div class="gmvcCell">11/11/1995</div> 
 
    <div class="gmvcCell">Paris</div> 
 
</div>

Answer 2

クイックサンプル：

代わりコードを簡潔につながるES6機能のいくつかを使用後あなたは結果をフィルタリングして空の配列を除外することができます

Answer 3

あなたのスクリプトでは：nullでないと未定義でないかどうかを行配列に追加する前に値をチェックしてください。

if(value != null || value != undefined) 
{ 
rowArray.push(value.trim()); 
} 

Answer 4

はここquerySelectorAll

var gmvcRowArray = []; 
 
document.querySelectorAll('.gmvcRow').forEach((el, idxRow) =>{ 
 
var gmvcCellArray = []; 
 
\t el.querySelectorAll('.gmvcCell') 
 
    .forEach((el) =>{ 
 
    \t gmvcCellArray.push(el.innerText); 
 
    }); 
 
    gmvcRowArray.push(gmvcCellArray) 
 
}) 
 
console.log(gmvcRowArray)

<div class="gmvcRow"> 
 
     <div class="gmvcCell">Name1</div> 
 
     <div class="gmvcCell">lastname1</div> 
 
     <div class="gmvcCell">dob1</div> 
 
     <div class="gmvcCell">city1</div> 
 
</div> 
 
<div class="gmvcRow"> 
 
     <div class="gmvcCell">Name2</div> 
 
     <div class="gmvcCell">lastname2</div> 
 
     <div class="gmvcCell">dob2</div> 
 
     <div class="gmvcCell">city2</div> 
 
</div> 
 
<div class="gmvcRow"></div> 
 
<div class="gmvcRow"></div> 
 
<div class="gmvcRow"></div> 
 
<div class="gmvcRow"></div>