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

Non pas si élégante, mais pour moi légèrement plus complète (tout en étant la plus rapide pour des échantillons de données d'entrée plus importants) solution avec reduce():

const result = [...document.getElementsByTagName('td')].reduce((res, item) => (item.getAttribute('colspan') == 3 ? res.country = item.textContent : res.obj = [...(res.obj || []), {country: res.country, city: item.textContent}], res), {}).obj;

console.log(result);

      Canada

      Toronto
      Montreal
      Vancouver

      USA

       New York
       Chicago
       Boston

       Washington
       Detroit
       Los Angeles