Récupérer les données d'un fichier Json et les afficher

Version imprimable

04/11/2019, 14h50
lhoang

Récupérer les données d'un fichier Json et les afficher

Bonjour à tous!
Je débute dans le métier et je suis en formation pour une reconversion professionnelle.
Donc, je ne sais pas trop ou poster ma demande.
Je suis actuellement en stage et l'entreprise me demande de faire un portage de leur application.
En ce moment, l'application est en XML et le portage doit se faire sur HTML via un serveur.
J'ai donc créer une page HTML avec BOOTSTRAP se rapprochant de l'application de départ.
Puis intégrer un template dans la page avec VueJS.
Les données ont étés insérées dans la vue dans le code HTML pour commencer.
Cette page est visible et affiché avec Flask.
La prochaine étape est de récupérer un fichier Json et d'afficher ces valeurs automatiquement dans un tableau lorsque l'on clic sur un lien.
Tout est mélangé pour moi.
Avez-vous la possibilité de m'aider?
1- Comment peut-on récupérer un fichier JSON à partir de l'application?
2- Peut-on récupérer les données et les utiliser dans la vue?
J'espère avoir été assez précis.
N'hésitez pas à me poser des questions ou me diriger vers des sites appropriés.
Merci d'avance.

Notre solution : page HTML (si vous avez des remarques)

Code:

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<body>
	<div class="jumbotron mt-5" id="app">
		<table id="idTable" role="presentation" class="table table-bordered table-hover m-0">
			<thead class="display-7">
				<tr>
					<th width=9%>Name</th>
					<th width=5%>Mode</th>
					<th width=71%>Description</th>
					<th width=5%>Version</th>
					<th width=10%>Help</th>
				</tr>
			</thead>
			<tbody>			
			<template v-for="cfg in configs" id="template"> <!-- template -->
			<tr>
				<td width=5%>
				<div class="border-0 padding-0">
						<div class="">	<img class="float-left" :src="(( cfg.icoName ))" alt="" /></div>
						<textarea id="name" name="name" class="form-control form-control border-0 rounded-0" style="background-color:#E9ECEF" placeholder="">(( cfg.name ))</textarea>	
				</td>
				<td width=5%>
					<img :src="(( cfg.mode ))" class="img-fluid" />
				</td>
				<td width=75%>
					<textarea class="form-control form-control border-0" style="background-color:#E9ECEF" placeholder="Description text">(( cfg.description ))</textarea>
					<div class="dropdown">
						<button class="btn dropdown-toggle center-block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
						<div class="dropdown-menu" aria-labelledby="dropdownMenuButton row" style="background-color:#E9ECEF ">
							<div class="container row p-2 m-0 w-100">
								<div class="col-sm-4 p-2 m-0 d-block">
								<a class="dropdown-item font-weight-bold p-1" href="#" disable style="background-color:#E9ECEF font-size: 1px">Edit an icon</a>
								<hr>
								<a class="dropdown-item " href="#" v-for="ico in cfg.edit_icon">(( ico.icon_name ))</a>
								<hr>
								</div>
							<div class="col-sm-4 p-2 m-0 d-block">
								<a class="dropdown-item font-weight-bold p-1" href="#">Folder</a>
								<hr>
								<a class="dropdown-item " href="#">"Folder path"</a>
								<a class="dropdown-item " href="#">Open the container</a>
								<hr>
							</div>
							<div class="col-sm-4 p-2 m-0 d-block">
								<a class="dropdown-item font-weight-bold p-1" href="#" id="" role="button" data-toggle="" >Edit files</a>
								<hr>
								<a class="dropdown-item " href="#" v-for="file in cfg.edit_files">(( file.file_name ))<br></a>
								<hr>
							</div>	
						</div>
					</div>
				</td>
				<td width=5%>(( cfg.version ))</td>
				<td width=10%>
					<div class="" >
						<textarea id="help" name="help" class="form-control form-control border-0 rounded-0" style="background-color:#E9ECEF" placeholder="">(( cfg.help ))</textarea>
					</div>
				</td>
			</tr>
		  </template>
		  </tbody>
	  </table>
    <footer role="contentinfo" class="">
        <!-- Contact -->
        <p class="text-center"><a href="#" class="text-dark">Submit a bug or improvement?</a></p>
        <!-- Legal mention -->
        <p class="text-center">&copy; ViewPoint 2006-2019</p>
    </footer>  
 </div>
 
<style>
.dropdown:hover>.dropdown-menu {
  display: block;
}
 
.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}
</style>
 
<script>
 
var example1 = new Vue({
  delimiters: ['((', '))'],
  el: '#app',
  data: {
    configs: [
    ]
  },
  created: function() {
        console.log("created");
        myload(this);
  }
});
 
function myload(elm) {
  var flickerAPI = "/config";
  $.getJSON( flickerAPI, {
  })
    .done(function( data ) {
          for(var i= 0; i < data.configs.length; i++) {
                elm.configs.push( data.configs[i] );
          }
    });
}
</script>
</body>

Notre solution : le fichier json

Code:

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
{ 
 "configs": [ 
				{ "icoName": "https://dummyimage.com/32x32/000/fff.png&text=image1",
							"name": "cf1",
							"edit_icon": [ 
											{ "icon_name": "Generic protocol" },
											{ "icon_name": "Water maze" },
											{ "icon_name": "Elevated Plus maze" },
											{ "icon_name": "Porsolt" },
											{ "icon_name": "Zebra fish" },
											{ "icon_name": "Nose detection" },
											{ "icon_name": "Motion Quantification" },
											{ "icon_name": "Standard Trajectometry" },
											{ "icon_name": "Social affairs" }
										  ],
							"mode": "camera.png",
							"description": "ma description de la config cf1",
							"version": "00.001",
							"help": "des instructions cf1 pour aider",
							"edit_files": [
										  { "file_name": "DefaultConfig.xml" },
										  { "file_name": "Menu.xml"},
										  { "file_name": "Options.xml"},
										  { "file_name": "PropertyGrid.xml"}
										  ]
						  },
				{ "icoName": "Icon.ico",
							"name": "cf2",
							"edit_icon": [ 
											{ "icon_name": "Generic protocol" },
											{ "icon_name": "Water maze" },
											{ "icon_name": "Elevated Plus maze" },
											{ "icon_name": "Porsolt" },
											{ "icon_name": "Zebra fish" },
											{ "icon_name": "Nose detection" },
											{ "icon_name": "Motion Quantification" },
											{ "icon_name": "Standard Trajectometry" },
											{ "icon_name": "Social affairs" }
										  ],
							"mode": "camera.png",
							"description": "ma description de la config cf2",
							"version": "00.002",
							"help": "des instructions cf1 pour aider",
							"edit_files": [
										  { "file_name": "DefaultConfig.xml" },
										  { "file_name": "Menu.xml"},
										  { "file_name": "Options.xml"},
										  { "file_name": "PropertyGrid.xml"}
										  ]
						  },
				{ "icoName": "Icon.ico",
							"name": "cf3",
							"edit_icon": [ 
											{ "icon_name": "Generic protocol" },
											{ "icon_name": "Water maze" },
											{ "icon_name": "Elevated Plus maze" },
											{ "icon_name": "Porsolt" },
											{ "icon_name": "Zebra fish" },
											{ "icon_name": "Nose detection" },
											{ "icon_name": "Motion Quantification" },
											{ "icon_name": "Standard Trajectometry" },
											{ "icon_name": "Social affairs" }
										  ],
							"mode": "camera.png",
							"description": "ma description de la config cf3",
							"version": "00.003",
							"help": "des instructions cf1 pour aider",
							"edit_files": [
										  { "file_name": "DefaultConfig.xml" },
										  { "file_name": "Menu.xml"},
										  { "file_name": "Options.xml"},
										  { "file_name": "PropertyGrid.xml"}
										  ]
						  }
            ]   
}

Notre solution : le fichier python

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from flask import Flask, escape, request, jsonify, render_template, Response
app = Flask(__name__)
 
@app.route('/')
def hello():
    return render_template('index.html', titre="Bienvenue !", mots=[])
 
@app.route('/config')
def config():
    with open('config.json','r') as f:
        return Response(headers={'Content-Type':'application/json'},response=f.read())
 
if __name__ == '__main__':
    app.run(debug=True)

25/11/2019, 14h13
Bensljul

Salut!

Tout dépend de ce que tu veux faire exactement avec ton fichier Json :D
26/11/2019, 11h02
lhoang

Bonjour,
le but était de lire un fichier json et d'afficher les éléments directement dans un tableau.
Le code affiché fonctionne mais je ne sais pas la méthode utilisée est la bonne.
Il peut aussi avoir une meilleure solution.