Comment faire pour convertir un Objet JSON dans un tableau HTML?

J'ai un objet JSON qui ressemble à ceci:

{"a": 1, "b": 3, "ds": 4}

Je voudrais le convertir en un tableau HTML qui ressemble à ceci:

name | Value
a     1
b     3
ds    4

Quelqu'un pourrait-il me dire comment faire?

InformationsquelleAutor user2565192 | 2013-12-09
  1. 12

    C'est très simple avec jQuery:

    $(function() {
  var jsonObj = $.parseJSON('{"a":1,"b":3,"ds":4}');
  var html = '<table border="1">';
  $.each(jsonObj, function(key, value) {
    html += '<tr>';
    html += '<td>' + key + '</td>';
    html += '<td>' + value + '</td>';
    html += '</tr>';
  });
  html += '</table>';
  $('div').html(html);
});

    Voici le lien pour le travail de violon.

    Mise à JOUR: une autre façon d'y parvenir est par l'utilisation de une bibliothèque appelée dynatable pour convertir au format JSON dans un tableau triable.

    • Votre code est beaucoup plus simple que le code que j'ai eu, et beaucoup plus propre. Merci... sauvé mon âme!
    InformationsquelleAutor Chalist
  2. 5

    Vous pouvez utiliser javascript:

    <script type="text-javascript">
  var data = {
    "a": 1,
    "b": 3,
    "ds": 4
  };
  //Create a new table
  var table = document.createElement("table");
  //Add the table header
  var tr = document.createElement('tr');
  var leftRow = document.createElement('td');
  leftRow.innerHTML = "Name";
  tr.appendChild(leftRow);
  var rightRow = document.createElement('td');
  rightRow.innerHTML = "Value";
  tr.appendChild(rightRow);
  table.appendChild(tr);
  //Add the table rows
  for (var name in data) {
    var value = data[name];
    var tr = document.createElement('tr');
    var leftRow = document.createElement('td');
    leftRow.innerHTML = name;
    tr.appendChild(leftRow);
    var rightRow = document.createElement('td');
    rightRow.innerHTML = value;
    tr.appendChild(rightRow);
    table.appendChild(tr);
  }
  //Add the created table to the HTML page
  document.body.appendChild(table);
</script>

    Le HTML résultant de la structure est:

    <table>
  <tr>
    <td>Name</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
  </tr>
  <tr>
    <td>ds</td>
    <td>4</td>
  </tr>
</table>

    Voici le lien vers le travail de violon.

    InformationsquelleAutor Aurélien Gasser
  3. 1

    Vous devriez jeter un oeil à Knockout.js, avec ça, vous pouvez prendre vos données JSON et le lier à des éléments HTML.

    La mise à jour se fait alors automatiquement, donc vous n'avez pas de gâchis avec que par vous-même.

    Ici est un liste d'exemples.

    InformationsquelleAutor Robert