Lecture fichier Json et VueJS

Bonjour,
Je voudrais faire une liste de "icon_name" et de "file_name" dans un template vueJs.
à ce jour il me rend le tableau complet ["ConfigurationSetup.xml","DefaultConfig.xml","Menu.xml","Options.xml","VpCore2.ini"]
j'aimerais afficher "ConfigurationSetup.xml" puis "DefaultConfig.xml" ect
Merci pour vos retour

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
[{
  "icoName": "https://dummyimage.com/32x32/000/fff.png&text=image1",
  "name": "cf1",
  "icon_name": ["Generic protocol", "Water maze", "Elevated Plus maze", "Porsolt", "Zebra fish", "Nose detection", "Motion Quantification", "Standard Trajectometry", "Social affairs"],
  "mode": "https://dummyimage.com/32x32/000/fff.png&text=image1",
  "description": "Ma Description",
  "version": "00.001",
  "help": "Aide",
  "file_name": ["DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.xml"],
  "applicationName": "",
  "path_folder": ""
}, {
  "icoName": "ZEBRA 2",
  "name": "Zebralab 2",
  "icon_name": null,
  "mode": null,
  "description": "Optogenetic 3 couleurs-Live 2",
  "version": "5.13.0.330",
  "help": "",
  "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "VpCore2.ini"],
  "applicationName": "Optogenetic",
  "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\A-Copie"
}, {
  "icoName": "",
  "name": "",
  "icon_name": null,
  "mode": null,
  "description": "",
  "version": "5.13.0.330",
  "help": "",
  "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.html", "VpCore2.ini"],
  "applicationName": "ApplicationName",
  "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\AVI"
}, {
  "icoName": "QUANTIFICATION",
  "name": "",
  "icon_name": null,
  "mode": null,
  "description": "",
  "version": "5.13.0.330",
  "help": "",
  "file_name": ["DefaultConfig.xml", "Menu.xml", "Options.xml", "PropertyGrid.html"],
  "applicationName": "",
  "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\Baumer"
}, {
  "icoName": "ZEBRA",
  "name": "Zebralab",
  "icon_name": null,
  "mode": null,
  "description": "Optogenetic 3 couleurs-Live",
  "version": "5.13.0.330",
  "help": "",
  "file_name": ["ConfigurationSetup.xml", "DefaultConfig.xml", "Menu.xml", "Options.xml", "VpCore2.ini"],
  "applicationName": "Optogenetic",
  "path_folder": "C:\\ProgramData\\ViewPointLS\\VpCore2\\Chronolog"
}]

HTML

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
  <!-- template -->
<template v-for="cfg in configs" id="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>
            </div>
        </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-md-4 p-2 m-0 d-block overflow-auto">
                            <a class="dropdown-item font-weight-bold p-1" href="#" disable style="background-color:#E9ECEF ">Edit an icon</a>
                            <hr>
                            <a class="dropdown-item " href="#" v-for="ico in configs">(( ico.icon_name ))</a>
                            <hr>
                        </div>
                        <div class="col-md-4 p-2 m-0 d-block overflow-auto">
                            <a class="dropdown-item font-weight-bold p-1" href="#">Folder</a>
                            <hr>
                            <a class="dropdown-item " href="#">"(( cfg.path_folder ))"</a>
                            <a class="dropdown-item " href="#">Open the container</a>
                            <hr>
                        </div>
                        <div class="col-md-4 p-2 m-0 d-block overflow-auto">
                            <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 configs">(( file.file_name ))<br></a>
                            <hr>
                        </div>
                    </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>

SCRIPT

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var GetJson = request.response;
//passage de JSON en JS
var configs_json = JSON.parse(GetJson);
 
//vue sur le tableau avec les valeurs de configs 
var AppVPM = new Vue({
    delimiters: ['((', '))'],
    el: '#app',
    data: {
        configs: configs_json
    },
});