Comment convertir des données d'un tableau html en tableau d'objets en utilisant du javascript vanilla

Question

Il est bien connu que le format 'tableau d'objets' est bien adapté pour stocker des données de manière persistante. Je serais extrêmement reconnaissant si un expert en JavaScript m'aide à trouver la réponse sur comment puis-je lire cette table HTML avec du JavaScript vanilla et transférer les données dans le tableau d'objets suivant.

J'ai produit des tonnes de code, principalement en comparant deux tableaux d'objets. Malheureusement, je n'ai même pas approché d'une solution.

La table à partir de laquelle récupérer des données:

      Canada

      Toronto
      Montreal
      Vancouver

      USA

       New York
       Chicago
       Boston

       Washington
       Detroit
       Los Angeles

Résultat attendu :

 [
 {"pays":"Canada","ville":"Toronto"},
 {"pays":"Canada","ville":"Montreal"},
 {"pays":"Canada","ville":"Vancouver"},
 {"pays":"USA","ville":"New York"},
 {"pays":"USA","ville":"Chicago"},
 {"pays":"USA","ville":"Boston"},
 {"pays":"USA","ville":"Washington"},
 {"pays":"USA","ville":"Detroit"},
 {"pays":"USA","ville":"Los Angeles"}
 ]

Le code est valide, contrairement à l'approche suivante:

let theResult = [];
    arrayOfCountriesAndCitiesObjects.forEach((item, iIndex) => {
        arrayOfCitiesObjects.forEach((elem, eIndex) => {
            if(item.city !== elem.city && item.iIndex < elem.eIndex) theResult.push(copy(elem, item)); 
        });
    });
    function copy(firstObj) {
      for (let i = 1; i < arguments.length; i++) {
        let arg = arguments[i];
        for (let key in arg) {
          firstObj[key] = arg[key];
        }
      }
      return firstObj;
    }

Answer 1

Vous pourriez stocker la valeur de colSpan === 3 en tant que pays et pousser toutes les autres valeurs comme ville dans l'ensemble de résultats.

Cela fonctionne avec du Javascript pur sans aucune bibliothèque.

var result = [],
    country = '';

document
    .querySelectorAll('table td')
    .forEach(td => {
        if (td.colSpan === 3) {
            country = td.innerHTML;
            return;
        }
        result.push({ country, city: td.innerHTML.trim() });
    });

console.log(result);

      Canada

      Toronto
      Montreal
      Vancouver

      USA

       New York
       Chicago
       Boston

       Washington
       Detroit
       Los Angeles

Answer 2

Vous pouvez utiliser for pour parcourir chaque tr. Trouvez le td sur chaque tr, s'il n'y en a qu'un, stockez le texte dans la variable currentCountry. S'il y en a plus d'un, ajoutez l'objet à la variable de résultat.

var currentCountry = "";
var result = [];

var tr = document.querySelectorAll('table tr');

for (var i = 0; i < tr.length; i++) {
  var td = tr[i].querySelectorAll('td');

  if (td.length === 1) currentCountry = td[0].innerHTML;
  else if (td.length > 1) {
    for (var a = 0; a < td.length; a++) {
      result.push({country: currentCountry,city: td[a].innerHTML});
    }
  }
}

console.log(result);

      Canada

      Toronto
      Montreal
      Vancouver

      USA

      New York
      Chicago
      Boston

      Washington
      Detroit
      Los Angeles

Answer 3

Vous devez attribuer une classe spéciale à tous les contenant des noms de pays. Ensuite, utilisez querySelectorAll et utilisez une boucle forEach.

const tr = document.querySelectorAll('tr');

const arr = []
let count = '';

tr.forEach(x => {
  if(x.classList.contains('head')){
    count = x.children[0].innerHTML
  }
  else{
    let child = [...x.querySelectorAll('td')]
    arr.push(...child.map(a => ({country:count,city:a.innerHTML})))
  }
})

console.log(arr)

      Canada

      Toronto
      Montreal
      Vancouver

      USA

       New York
       Chicago
       Boston

       Washington
       Detroit
       Los Angeles

Answer 4

var country = null, result = [];
var tds = Array.from(document.querySelectorAll("#myTable tbody tr td"));
for (var i = 0; i < tds.length; i++) {
    let item = tds[i];
    if (item.getAttribute("colspan") == "3") {
        country = item.innerText;
        continue;
    }

    result.push({ country: country, city: item.innerText });
}
console.log(result);

            Canada

            Toronto
            Montreal
            Vancouver

            États-Unis

            New York
            Chicago
            Boston

            Washington
            Détroit
            Los Angeles

Answer 5

Utilisation de reduce

 const items = document.querySelectorAll('table tbody td')

 const results = [...items].reduce((allItems, item)=>{
   if(item.getAttribute('colspan') === '3'){
     allItems['country'] = item.textContent
     return allItems
   }
   allItems.push({country: allItems['country'],city:item.textContent})
   return allItems
 },[])