IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupèrer des données d'une API avec Retool et JS


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2017
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2017
    Messages : 65
    Points : 31
    Points
    31
    Par défaut Récupèrer des données d'une API avec Retool et JS
    Bonjour,
    je souhaite récupérer les données d'une API (Sirène) Open Data à l'aide de retool et de requête javascript.
    La connexion à l'API se passe bien, on peut récupérer les données facilement. Lorsque je souhaite afficher les données sous forme de tableau ça bloque. On obtient des données sous cette forme :
    Documentation de l'API
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    {
     "header": {
     "statut": 200,
     "message": "ok"
     },
     "etablissement": {
     "siren": "398607333",
     "nic": "00059",
     "siret": "39860733300059",
     "statutDiffusionEtablissement": "O",
     "dateCreationEtablissement": "2015-01-09",
     "trancheEffectifsEtablissement": "00",
     "anneeEffectifsEtablissement": "2016",
     "activitePrincipaleRegistreMetiersEtablissement": "5610CR",
     "dateDernierTraitementEtablissement": "2018-09-29T12:24:50",
     "etablissementSiege": false,
     "nombrePeriodesEtablissement": 4,
     "uniteLegale": {
     "etatAdministratifUniteLegale": "C",
     "statutDiffusionUniteLegale": "O",
     "dateCreationUniteLegale": "1994-10-10",
     "categorieJuridiqueUniteLegale": "1000",
     "denominationUniteLegale": null,
     "sigleUniteLegale": null,
     "denominationUsuelle1UniteLegale": null,
     "denominationUsuelle2UniteLegale": null,
     "denominationUsuelle3UniteLegale": null,
     "sexeUniteLegale": "M",
    Le truc c'est que j'aimerai bien disposer de mes données différemment afin de tout afficher dans un seul tableau pour l'exporter plus tard dans une base de données. Ici on voit qu'il y a plusieurs dimensions au tableau : -> etablissement -> uniteLegale ect ... Pour afficher le tableau correctement j'ai fait en sorte de passer par deux requêtes différentes à l'API (une pour avoir les établissements uniquement et l 'autre les uniteLegale).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var dataEtablissement = {{nomEntreprise.data.etablissements}} // Code sur retool permettant de récupérer le tableau établissement
    var dataUniteLegale= {{query7.data.etablissements}};  // Récupère les données dans UniteLegale
    var dataPush = [];
    for (let i = 0; i < {{query7.data.etablissements.length}}; i++) {
         dataPush.push(dataUniteLegale[i].uniteLegale, dataEtablissement[i]);
    }
    return dataPush;
    Nom : Capture.PNG
Affichages : 304
Taille : 5,1 KoNom : Capture.PNG
Affichages : 301
Taille : 19,0 Ko

    Le résultat est le suivant :
    Nom : Capture.PNG
Affichages : 289
Taille : 12,2 Ko
    Les valeurs ne s'ajoutent pas comme je l'espérait elle prennent une ligne chacune alors que souhaiterai quelles fusionnent pour être dans le même tableau.
    Merci d'avance pour votre aide, si vous avez des questions je reste disponible.

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    A priori, c'est une mauvaise idée d'aplatir le tableau... d'autant que pour éviter le doublon de clés, il faudra préfixer chaque index... ce qui revient donc un peu au même
    Quoi qu'il arrive, qu'on ne touche pas à la réponse, qu'on la reformatte, qu'on la reformatte en prefixant les index, il sera toujours possible d'ajouter les valeurs dans une base de données

    Cependant, il est plus simple de ne travailler la réponse QUE pour l'insertion en base de données plutôt que de la retravailler maintenant et la relire lors de l'insertion
    En effet, si vous créez 2 tables pour stocker les réponses. Par exemple : pour les infos générales de l'établissement et une pour les unités légales : il sera plus facile de savoir que les infos de la seconde sont dans l'index uniteLegale, plutôt que de vérifier le début de string de chaque index (est-ce que cet index commence par uniteLegale_ ?)


    Voici un exemple de comment aplatir un JSON mais je le déconseille extrêmement fortement !
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
        // Réponse basée sur ce qu'on a vu dans le post original
        var response = {
            "header": {
                "statut": 200,
                "message": "ok"
            },
            "etablissement": {
                "siren": "398607333",
                "nic": "00059",
                "siret": "39860733300059",
                "statutDiffusionEtablissement": "O",
                "dateCreationEtablissement": "2015-01-09",
                "trancheEffectifsEtablissement": "00",
                "anneeEffectifsEtablissement": "2016",
                "activitePrincipaleRegistreMetiersEtablissement": "5610CR",
                "dateDernierTraitementEtablissement": "2018-09-29T12:24:50",
                "etablissementSiege": false,
                "nombrePeriodesEtablissement": 4,
                "uniteLegale": {
                    "etatAdministratifUniteLegale": "C",
                    "statutDiffusionUniteLegale": "O",
                    "dateCreationUniteLegale": "1994-10-10",
                    "categorieJuridiqueUniteLegale": "1000",
                    "denominationUniteLegale": null,
                    "sigleUniteLegale": null,
                    "denominationUsuelle1UniteLegale": null,
                    "denominationUsuelle2UniteLegale": null,
                    "denominationUsuelle3UniteLegale": null,
                    "sexeUniteLegale": "M",
                }
            }
        };
        console.log('etablissement', response.etablissement);
        // On crée une valeur sur base de notre réponse
        // On utilise goclone() pour copier notre variable sans référence (voir fonction en bas)
        var flattend = goclone(response.etablissement);
        // Pour chaque sous-élément, on va créer une valeur préfixée dans notre valeur aplatie
        // Si on avait plusieurs sous-éléments, il serait possible de faire une boucle qui vérifiée si le sous-élément est un object, et si oui le prefixer et le parcourir
        for (const ul in response.etablissement.uniteLegale) {
            // On préfixe nos index et on met les valeurs
            flattend['uniteLegale_' + ul] = response.etablissement.uniteLegale[ul];
        }
        // On supprime le sous-élément parcouru de notre objet final
        delete flattend.uniteLegale;
        console.log('flattend     ', flattend);
     
     
     
     
        function goclone(source) {
            if (Object.prototype.toString.call(source) === '[object Array]') {
                var clone = [];
                for (var i = 0; i < source.length; i++) {
                    clone[i] = goclone(source[i]);
                }
                return clone;
            } else if (typeof (source) == "object") {
                var clone = {};
                for (var prop in source) {
                    if (source.hasOwnProperty(prop)) {
                        clone[prop] = goclone(source[prop]);
                    }
                }
                return clone;
            } else {
                return source;
            }
        }

    EDIT : Voici la version qui parcours l'objet etablissement et qui aplati automatiquement tous les sous-objects (et non pas uniquement uniteLegale comme le code précédent mais je le laisse car plus facile à comprendre)
    Démo CodePen : https://codepen.io/DarkStar123456/pe...x?editors=1111
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var flattend = goclone(response.etablissement);
    // Pour chaque sous-élément, on va créer une valeur préfixée dans notre valeur aplatie
    for (const sousElement in response.etablissement) {
        // Si le sous-élément est un objet, on va ajouter chaque paire index<=>valeur à notre objet principal
        if (typeof response.etablissement[sousElement] === 'object') {
            // On parcours toutes les clés
            for (const se in response.etablissement[sousElement]) {
                flattend[sousElement + '_' + se] = response.etablissement[sousElement][se];
            }
            // On supprime le sous-élément parcouru de notre objet final
            delete flattend[sousElement];
        }
    }
    console.log('flattend     ', flattend);

    Voici ce qu'affichent les console.log() :

    Nom : Capture d’écran 2022-05-16 161422.jpg
Affichages : 268
Taille : 142,4 Ko

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2017
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2017
    Messages : 65
    Points : 31
    Points
    31
    Par défaut
    Bonjour, tout d'abord merci pour votre réponse rapide. Au niveau du format je sais que c'est pas optimal de faire comme ça, mais je ne trouve pas d'autres solutions pour regrouper toutes ces données dans une même et unique table (ce qui m'est demandé). Au niveau des doublons je comptais les gérer directement dans la requête à l'API ou on peut choisir les champs souhaités.
    J'ai regardé le code que vous m'avez envoyé hier. J'ai essayé de le faire correspondre avec les données que je vais utiliser (n'étant pas exactement identique, j'ai fait en sorte d'utiliser beaucoup de données afin de voir ce que ça allait donner avec plusieurs lignes & tableaux).
    https://codepen.io/huguestouyon/pen/XWZpKGz

    Je récupère bien les données mais le problème est que j'obtiens ce genre de résultats :

    Nom : Capture.PNG
Affichages : 259
Taille : 32,8 Ko

    Peut-être était-il dû au fait qu'il y ait plusieurs lignes à traiter ?

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Je ne comprends toujours pas le problème ni le rapport avec l'insertion en base de données car de toute façon, je vois mal la création d'une requête d'insertion basée sur le nom des champs de la réponse
    Ca serait assez sale comme façon de faire et particulièrement déconseillé dans ce cas-ci étant donné que les clés sont écrites en camelCase et que suivant le système d'exploitation, l'écriture pourra être sensible ou non à la casse et donc amener à des conflits.

    Toujours est-il que la valeur de response de votre code ne correspond absolument pas à ce que vous avez présenté dans le post initial étant donné que dans ce dernier il s'agit d'un objet JSON alors que dans votre Codepen, il s'agit d'un tableau d'objets.
    Il vous manque donc : une boucle pour parcourir le tableau, et un push() à la fin de chaque boucle afin d'obtenir un tableau d'objets aplatis

    Je vais forker votre Codepen et mettre à jour ma réponse dès que c'est fait si vous n'avez pas trouver la solution d'ici là

    EDIT : Ha ben voilà, on se retrouve spécifiquement dans le problème auquel je pensais lors de ma première réponse : les sous-objets n'en sont pas en réalité car ce sont des tableaux d'objets
    Ce qui parait tout à fait logique : si on a un sous-objet c'est souvent un tableau d'objet car il y a plusieurs données à sauvegarder sinon on aurait tout mis directement à plat dans l'objet initial
    Par exemple, si on stock les adresses des sociétés, ça sera forcément dans une tableau à part car il peut y avoir plusieurs adresses pour une même société. Ca aura pour résultat que dans une réponse d'API on a un index addresses par exemple, qui soit un tableau contenant toutes les adresses de la société

    Je me répète une fois de plus : pourquoi faites-vous ça ? Ca n'a aucun sens Comment comptez-vous sauvegarder des tableaux de résultats au sein d'une même table ? C'est impossible proprement. Et si vous sauvegardez dans plusieurs tables, alors il est beaucoup plus simple de ne pas toucher à la structure (et même si on sauvegardait tout dans une table ce serait plus simple de pas y toucher)

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2017
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2017
    Messages : 65
    Points : 31
    Points
    31
    Par défaut
    Merci pour votre réponse !
    Pour tous vous dire, le but de la requête est de récupérer via l'API Sirène des données sur les entreprises grâce à un champs de saisie (numéro de siret, siren ou encore par localisation ou nom d'entreprise).
    On m'a demandé que les données puissent être consulté dans un seule et même tableau (peu importe le(s) champ(s) de saisie). L'utilisateur pourra cocher les lignes qu'il souhaite sauvegarder dans la base.
    Ce tableau doit être stocké dans une table de base de données (sûrement pour pouvoir exporter-visualiser les données d'un seul coup (je demanderai des précisions)).
    Selon vous, la meilleure solution pour réaliser un travail de ce genre serait de sauvegarder les données dans différentes tables d'une base de données ?

    Par exemple :

    * Une table stockant uniquement les unitesLegales (siren, statutDiffusionUniteLegale, unitePurgeeUniteLegale, ...).
    * Une seconde stockant uniquement les periodesUniteLegale (dateFin, dateDebut, ...)

    Et ainsi de suite pour chaque requête via l'api.

    Dans ce cas il faudrait quand même que je "découpe" la requête afin de remplir chaque table avec les valeurs correspondantes. Par exemple si je fais une requête comme sur le codePen (que je vous ai envoyé) il faudrait que je récupère les uniteLegales uniquement d'un côté (en enlevant les periodesUniteLegale) et de l'autre côté il faudrait les garder et enlever le reste ?

    Désolé si c'est un peu confus je commence un peu à m'y perdre

  6. #6
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Alors je ne suis pas sûr d'avoir tout bien compris car je pense que je me suis perdu à un moment en lisant
    Maintenant que j'ai eu une réponse, je peux vous montrer un code qui fait exactement ce que vous voulez mais une fois de plus je le déconseille : https://codepen.io/DarkStar123456/pe...z?editors=0010

    Je comprends un peu mieux même si je ne comprends pas le fait qu'un utilisateur puisse choisir ce qu'il veut sauvegarder sachant qu'il s'agit de données publiques et donc toujours accessibles à priri, non ?
    Quoi qu'il arrive, on en revient toujours un peu même problème : s'il y a 4 unités légales, comment comptez-vous sauvegarder ces infos ? 4 x le nombre de champs que représentent les unités légales ? OK très bien, et si demain une société en à 10 ? Et si demain, l'entreprise en question c'est Mc Donald's ?
    Voici une statistique sur le nombre de restaurants McDonald's en France au 31 décembre de 2011 à 2020. En 2020, on dénombrait 1.495 restaurants McDonald's en France, soit uniquement cinq établissements supplémentaires par rapport à 2019.
    Donc si je suis la logique, 1495 établissements x le nombre de champs = des données illisibles (et très probablement une DB extrêmement lente)

    Quoi qu'il en soit, je ne comprends pas le rapport entre découper les requêtes API et la sauvegarde des données.
    J'ai un peu de mal à suivre car je n'ai pas accès à l'API et le JSON du post initial est très loin de celui présenté dans le post #3
    Peut-être serait-il possible de donner une image ou un code HTML représentatif de ce qu'on doit afficher et du fonctionnement ?

Discussions similaires

  1. Réponses: 12
    Dernier message: 29/05/2021, 12h35
  2. Récupérer des données qui se suivent avec une RegEx
    Par jpascal dans le forum Langage
    Réponses: 4
    Dernier message: 02/07/2020, 10h01
  3. [XL-2016] Récupérer des données sur le web avec une API GET
    Par GroFlo dans le forum Excel
    Réponses: 0
    Dernier message: 06/05/2019, 22h49
  4. [XL-2003] Récupérer des données d'une page internet avec login
    Par yoyo_l dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 20/08/2009, 22h58
  5. [Excel] Récupérer des données d'une base Access
    Par FoxDeltaSierra dans le forum Excel
    Réponses: 8
    Dernier message: 03/09/2005, 10h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo