posts

Cette section va vous montrer comment insérer des données JSON dans un tableau Excel. Avant d’aller plus loin, nous allons faire deux petits apartés sur les fonctions fléchées (arrow functions) et sur la fonction JavaScript map().

Un petit rappel sur les fonctions fléchées

Ce code :

var hello = function() {

  return 'Hello World!';

}

Est équivalent à :

let hello = () => 'Hello World!';

En effet, les accolades ne sont pas nécessaires car la fonction contient une seule instruction qui effectue un return :

Allons un peu plus loin en ajoutant un paramètre à la fonction anonyme. Ce code :

var hello = function(nom) {

  return 'Hello ' + nom;

}

Est équivalent à :

let hello = (nom) => 'Hello ' + nom;

Ici encore, les accolades ne sont pas nécessaires car la fonction contient une seule instruction qui effectue un return :

Un second rappel sur la fonction JavaScript map()

Ces instructions stockent dans le tableau x[] la racine carrée de chacune des valeurs du tableau numbers[] :

var numbers = [4, 9, 16, 25];

var x = numbers.map(Math.sqrt);

La fonction map() :

• Parcourt le tableau numbers[] sur lequel elle est appliquée.
• Crée un tableau de même taille (ici, x[]).
• Applique la fonction passée en argument (sqrt()) à chacun des éléments du tableau numbers[] et stocke les résultats dans le tableau x[].

En tenant compte de ce qui a été dit dans ces deux apartés, nous allons définir ce tableau dans la feuille de calcul courante à partir de données JSON :

Voici le code utilisé :

Ce code est disponible en cliquant ici

async function ajoutJSON() {

  await Excel.run(async function(context) {

    let feuille = context.workbook.worksheets.getActiveWorksheet();

    // Ajout de la ligne de titre

    let tableauJSON = feuille.tables.add("A13:D13", true);

    tableauJSON.name = "tableaujson";

    tableauJSON.getHeaderRowRange().values = [["Formation", "Nombre", "Prix", "Total"]];

    // Définition du tableau de données en JSON

    var data = [

      {

        FORMATION: "Windows 10",

        NOMBRE: "1",

        PRIX: "950",

        TOTAL: "950"

      },

      {

        FORMATION: "Office 2019",

        NOMBRE: "2",

        PRIX: "1400",

        TOTAL: "2800"

      }

    ];

    // Injection des données JSON à la suite de la ligne de titre

    var newData = data.map((item) => [item.FORMATION, item.NOMBRE, item.PRIX, item.TOTAL]);

    tableauJSON.rows.add(null, newData);

  });

}

Les premières instructions sont très classiques. La feuille courante est placée dans la variable feuille :

let feuille = context.workbook.worksheets.getActiveWorksheet();

La ligne de titre est définie des cellules A13 à D13 :

let tableauJSON = feuille.tables.add("A13:D13", true);

tableauJSON.name = "tableaujson";

tableauJSON.getHeaderRowRange().values = [["Formation", "Nombre", "Prix", "Total"]];

Les données sont alors définies dans un tableau JSON et stockées dans la variable data :

var data = [

  {

    FORMATION: "Windows 10",

    NOMBRE: "1",

    PRIX: "950",

    TOTAL: "950"

  },

  {

    FORMATION: "Office 2019",

    NOMBRE: "2",

    PRIX: "1400",

    TOTAL: "2800"

  }

];

La fonction map() passe en revue les données contenues dans le tableau data[] sur lequel elle est appliquée. Elle parse les clés FORMATION, NOMBRE, PRIX et TOTAL et stocke les nouvelles données dans le tableau newData[] :

var newData = data.map((item) => [item.FORMATION, item.NOMBRE, item.PRIX, item.TOTAL]);

Le tableau newData[] contient deux tableaux (un par ligne) :

[

    ["Windows 10", "1", "950", "950"],

    ["Office 2019", "2", "1400", "2800"]

]

C’est exactement ce qu’il faut à la fonction rows.add() pour injecter ces données à la suite de la ligne de titre (null en premier argument) :

tableauJSON.rows.add(null, newData);

La fonction ajoutJSON() est définie en tant que gestionnaire évènementiel attaché au bouton d’id ajout de l’interface :

$("#ajout").click(() => tryCatch(ajoutJSON));

Voici le code HTML de l'interface :

<button id="ajout" class="ms-Button">

    <span class="ms-Button-label">Créer un tableau avec des données JSON</span>

</button>