1
votes

Convertir des lignes HTML en paire de valeurs de nom dans JQuery

J'essaie de convertir une table HTML en paire nom-valeur au format JSON à l'aide de Jquery.

  var result = $('myTable tbody').children().map(function () {
               var children = $(this).children();
                return {
                    name: children.eq(0).text(),
                    value: children.eq(1).text()
                };
               }).get();

Le tableau ci-dessus doit être converti en une paire nom-valeur au format JSON comme ci-dessous p>

[{
       "Customer":{ 
          "MobileNumber":"1223445"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "12.49"
         },
         {
            "Name":"Fuel",
             "value": "1223"
         }]
  },
  {
       "Customer":{ 
          "MobileNumber":"99999"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "11.39"
         },
         {
            "Name":"Fuel",
             "value": "1277745"
         }]
  }]

J'essaye de modifier cette fonction depuis ( récupère les valeurs de la table sous forme de paires clé-valeur avec jquery ) mais je ne peux pas faire les choses correctement.

 <table class="table">
        <thead class="thead-light">
           <tr>
                  <th>MobileNumber</th>
                   <th>Amount</th>
                   <th>Fuel</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1223445</td>
                  <td>12.49</td>
                  <td>1223</td>
              </tr>
              <tr>
                  <td>99999</td>
                  <td>11.39</td>
                  <td>1277745</td> 
              </tr>
          </tbody>
      </table>

Tout le monde a une idée convertir le tableau HTML au format JSON mentionné ci-dessus?

-Alan-

jquery html

4 commentaires

Quelle est la logique pour décider si une colonne doit entrer dans "Customer" ou TemplateFields "? Ou est-ce simplement une règle arbitraire et les colonnes ne seront pas sujettes à modification?

La première colonne va toujours à Customer et le reste de la colonne doit aller à TemplateFields

Comme ci-dessus pour décider si quantité / carburant est une chaîne / un nombre.

J'ai édité la question. Tout doit être au format chaîne

3 Réponses :

2
votes

Vous pouvez simplement sélectionner les noms de colonnes à partir des éléments et les faire correspondre via l'index de colonne. J'ai également corrigé votre faute de frappe "TemplateFieds", qui devrait être "TemplateFields". ("l" manquant)

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>
var colNames = $('.table thead th').get().map(el => el.textContent);
var result = $('.table tbody').children().map(function() {
  var children = $(this).children().get();
  var resultObj = {Customer: {}, TemplateFields: []};
  children.forEach((cell, index) => {
    if (index === 0) {
      resultObj['Customer'][colNames[index]] = cell.innerText;
    } else {
      resultObj['TemplateFields'].push({
        name: colNames[index],
        value: cell.innerText
      });
    }
  });
  return resultObj;
}).get();
console.log(result);

0 commentaires

0
votes

Tout d'abord, parcourez la thead pour obtenir les propriétés du nom:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>

puis parcourez chaque ligne $ ('table> tbody> tr' ) en créant une entrée à ajouter à votre tableau de résultats et dans chaque ligne, parcourez chaque cellule sauf la première pour générer la paire nom / valeur.

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

var result = [];

$('table>tbody>tr').each(function() {
  var cells = $(this).find("td");
  var row = {
    Customer: { MobileNumber: cells.first().text() },
    TemplateFieds: []
  };
  cells.each(function(i, e) {
    if (i == 0) return; // skip first col
    row.TemplateFieds.push({
      "Name": cols[i],
      "value": $(this).text()
    })
  });
  result.push(row);
});

console.log(result);

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

Quelques notes:

veulent probablement un nom / valeur ou un nom / valeur plutôt qu'un nom / valeur
veulent probablement TemplateFie l ds

0 commentaires

0
votes

vous voilà:

let tab = document.getElementById("tab");
let names = tab.querySelectorAll("th");
let values = tab.querySelector("tbody").children;

let arr = [];

for(let i =0; i < values.length;i++){
  let obj = {};
  for(let j = 0;j < names.length;j++){
    obj[names[j].innerHTML] = values[i].children[j].innerHTML;
  }
  arr.push(obj);
}

console.log(JSON.stringify(arr));

mais ce n'est pas une bonne solution

1 commentaires

Certaines explications peuvent être une bonne chose, pour s'assurer que l'auteur comprend votre intention, surtout si votre suggestion n'est pas vraiment une bonne solution à long terme.