Wie durch HTML-Entitäten mit Javascript

Question

iterieren Ich habe das folgende HTML [unten]. Ich versuche, alle DOM mit class = "gmvcRow" zu durchlaufen, und den Text in allen "gmvcCell" für jeden 'gmvcRow' zu greifen. Ich möchte den ganzen Text in einem Array (['Vorname', 'Nachname', 'Dob', 'Stadt']) platzieren. Und ich möchte dieses Array in ein anderes Array platzieren, das "Arrays von gmvcRow" enthält. Mein Versuch ist unten, aber ich bin immer noch nicht erfolgreich. Ich verstehe, dass der Text in "gmvcCell" an sich ein weiterer Label-Knoten ist.

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

mein Code:

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

childNodes macht es schwerer als nötig, da es auch Textknoten auswählt.

Anstatt einige der ES6 Funktionen verwenden, die zu kurzem Code führen:

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

Schnell Probe 1-level Verschachtelung

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/

Nach einer ll Sie können Ergebnis filtern, um leere Arrays auszuschließen

Answer 3

In Ihrem Skript: Überprüfen Sie einfach den Wert vor dem Hinzufügen zum Zeilenarray, ob Is not null und nicht undefined.

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

Answer 4

Hier ist meine Antwort 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>