Formater un formulaire au format JSON

**itokia** · 31/08/2017, 13h26

Bonjour,

Je souhaiterai créer une fonction dynamique a fin de formater le résultat de mon formulaire dans un format spécifique JSON.

Sur chacun de mes champs je possède un 'data-base' contenant le nom de la table, eventuellement de la jointure, et celui du champ.

Imaginons que nous avons une table agent ayant les champs nom, prenom, enfants et coordonnees.
où enfants correspond a une jointure oneToMany et coordonnes une jointure coordonnes

Coté formulaire j'aurais :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<input type="text" data-base="nom">
<input type="text" data-base="prenom">
<input type="text" data-base="enfants|0|nomEnfant">
<input type="text" data-base="enfants|1|nomEnfant">
<input type="text" data-base="coodonnees|codePostal">
<input type="text" data-base="coodonnees|ville">

Je souhaiterais donc récupérer le json suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
{"nom":"nom4","prenom":"prenom4","enfants":[{"nomEfant":"sonNom"},{"nomEfant":"sonNom"}],"coordonnees":{"codePostal":59300,"ville"
:"maVille"}}

Je sais que ca doit se faire en recursivité mais je n'y arrive pas.

Serait il possible de m'orienter sur la facon de procéder svp?

Merci

Edit :
Pour l'instant je suis en train d'essayer de créer une fonction qui me permetra de créer un objet sous la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
niveau1 =>
                niveau2 =>
                                niveau3

Mais je n'arrive pas à cella.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function testObj(monTab, obj) {
    obj = obj || {};
    if(monTab.length > 0){
        obj[monTab[0]] = {};
        monTab.splice(0,1);
 
        obj = testObj(monTab, obj);
    }
 
    return obj;
 
};

Résultat obtenu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
{niveau1, niveau2, niveau3}

**danielhagnoul** · 31/08/2017, 22h38

Exemple :

Code HTML :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* code du test */
                
                #dataIndividu {
                        width: 22rem;
                }
                
                #dataIndividu > input {
                        display: block;
                        width: 18rem;
                }
                
                /* fin code du test */
                
        </style>
	<script>
                'use strict';
                                                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        // code du test
                        
                        
                        // fin code du test
                
                }, false );
                
                window.addEventListener( "load", ev => {
                        // le DOM est construit et la page web est visible
                        // code du test
 
                        document.querySelector( "#formIndividu" ).addEventListener( "submit", ev => {
                                ev.stopPropagation();
                                ev.preventDefault();
                                
                                const
                                        dataIndividu = {},
                                        inputs = Array.from( document.querySelectorAll( "#dataIndividu > input" ) );
                                        
                                for ( const input of inputs ){
                                        dataIndividu[ input.getAttribute( "placeHolder" ) ] = input.getAttribute( "data-base" );
                                }
                                
                                const strJSON = JSON.stringify( dataIndividu );
                        
                                // debug, console, touche F12
                                console.log( strJSON );
                                
                        }, false );
                        
                        // fin code du test
                
                }, false );
  </script>
</head>
<body>
	<main>
 
		<form id="formIndividu">
			<fieldset id="dataIndividu">
				<legend>Individu</legend>
				<input type="text" placeHolder="nom" data-base="Dupond">
				<input type="text" placeHolder="prénom" data-base="Henri">
				<input type="text" placeHolder="prénom enfant 1" data-base="Serge">
				<input type="text" placeHolder="prénom enfant 2" data-base="Luc">
				<input type="text" placeHolder="code postal" data-base="59300">
				<input type="text" placeHolder="ville" data-base="Villerasée">
			</fieldset>
			<input type="submit">
		</form>
 
	</main>
</body>
</html>

**itokia** · 01/09/2017, 07h28

Je te remercie pour ton aide daniel.

Mais mon problème actuelle se situe plus au niveau de la récursivité et l'affectation des sous objet à l'objet parent.
ex :
niveau1
|
niveau2
|
niveau3

Pour obtenir au final {"niveau1":{"niveau2":{"niveau3":""}}}

**itokia** · 01/09/2017, 09h11

J'avance un peu mais je n'obtiens toujours pas ce que je souhaite.

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
29
30
31
32
 
function testObj(monTab,parent) {
    var obj = {};
    var objFinal = {};
    parent = parent || (monTab.length>0)?monTab[0]:"";
 
console.debug('Dans la fonction => tab = ');
console.debug(monTab);
 
    if(monTab.length > 0){
 
        obj[monTab[0]] = (monTab.length==1)?"test":{};
 
 
console.debug("Dans le IF  longeur="+monTab.length);
console.debug("Avant:");
console.debug(obj);
 
 
        monTab.splice(0,1); //On supprime la premiere valeur du tableau
        obj = testObj(monTab,monTab[0]); //On rappelle la fonction recursive
        objFinal[parent] = obj;
 
 
console.debug("Après:");
console.debug("parent=>"+parent);
console.debug(objFinal);
    }
 
    return objFinal;
 
};

Les LOG:

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
29
30
31
32
 
Dans la fonction => tab = ["niveau1", "niveau2", "niveau3"]
 
Dans le IF  longeur=3
 
Avant:
Object { niveau1={...}}
Dans la fonction => tab = ["niveau2", "niveau3"]
 
Dans le IF  longeur=2
 
Avant:
Object { niveau2={...}}
Dans la fonction => tab = ["niveau3"]
 
Dans le IF  longeur=1
Avant:
Object { niveau3="test"}
Dans la fonction => tab = []
 
Après:
parent=>niveau3
Object { niveau3={...}}
Après:
parent=>niveau2
Object { niveau2={...}}
Après:
parent=>niveau1
objFinal =>
niveau1 Object { niveau2={...}}
        niveau2 Object { niveau3={...}}
                     niveau3 Object {}

Cepandant dans l'objet niveau 3 je devrais avoir "niveau3":"test" et non object.
Une idée svp?

**badaze** · 02/09/2017, 20h37

Une question. Pourquoi as-tu besoin de la récursivité ?
En fait je n'ai pas compris ta notion de niveau.

**itokia** · 04/09/2017, 08h10

@badaze, j'ai besoin de récursivité car je souhaiterais créer un script réutilisable dans mes prochains projets.
Par conséquence, je ne connais pas d'avance ma base de donnée et le nombre de jointure qui peut y avoir.

Par exemple, prenons un cas un peu tordu.
J'ai une table agent qui possède une jointure oneToMany avec coordonnees, qui possède également une jointure OneToOne avec LesVilles (je sais c'est idiot comme relation mais bon, ca reste un exemple)

Cela nous donne donc "agent" => (1 a n) "Coordonnees" => (1 a 1) "LesVilles"

Lorsque je vais récupérer mes données au format JSON j'aurais : Je fait un select * from agent;
{"nomAgent":"Polichon", "prenomAgent": "toto", "coordonnees":[{"numero": 12, "rue":"jean jaures", "ville":{"id":10,"nomVille":"Lille"}},{...},{...}] }

Dans mon input coté html, j'aurais un champ data-chargementauto="coordonnes|0|ville|nomVille" ce qui signifie que ce champ correspond a mon champ nomVille de ma table ville. Le "0" correspond à la clé de mon tableau coordonnes car je pourrais récupérer plusieurs adresses pour un agent.

Si je souhaite ajouter un champ input pour afficher le nom de l'agent je n'aurais que data-chargementauto="nomAgent"

J'espère avoir été un peu plus clair dans mes explications.

Formater un formulaire au format JSON

JavaScript

Vue hybride

Discussions similaires

Partager

Partager