Affichage Listgroup dynamique via du json

Version imprimable

2 pièce(s) jointe(s)

Bonjour, j'aimerai créer une affichage avec listgroup avec mon json que je reçois :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
var jsonData = '[
	{"class":"A","name":"Jhon PAPOU","color":"rouge"},
	{"class":"B","name":"Lionel Melin","color":"vert"},
	{"class":"C","name":"Osmel GIBI","color":"jaune"},
	{"class":"D","name":"James DADIN","color":"noir"},
	]';
<ul class="list-group">
    <span class="badge badge-primary badge-pill">A</span>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Jhon PAPOU
  </li>
 <span class="badge badge-primary badge-pill">B</span>
  <li class="list-group-item d-flex justify-content-between align-items-center">
   Lionel Melin
  </li>
<span class="badge badge-primary badge-pill">C</span>
  <li class="list-group-item d-flex justify-content-between align-items-center">
   OSMEL GIBI
  </li>
</ul>

Je veux afficher ma liste avec en bas ce quatre petits carreaux de couleur.

je n'arrive pas à mon affichage net voulu. Quelqu'un a une idée ?

Tu parles de la légende de couleur ou de la bordure droite de chaque ligne ?

accessoirement ta structure de ul est bancale... le span doit DANS le li

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="list-group">
 
  <li class="list-group-item d-flex justify-content-between align-items-center">
<span class="badge badge-primary badge-pill">A</span>
    Jhon PAPOU
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center">
 <span class="badge badge-primary badge-pill">B</span>
   Lionel Melin
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center">
<span class="badge badge-primary badge-pill">C</span>
   OSMEL GIBI
  </li>
</ul>

21/01/2020, 10h09
lnquaidorsay

Je parle de deux, je veux la bordure de droite de chaque ligne ainsi que de la légende.

Pour la bordure uti_lises une class css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="list-group">
 
  <li class="list-group-item d-flex justify-content-between align-items-center rouge">
<span class="badge badge-primary badge-pill">A</span>
    Jhon PAPOU
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center vert">
 <span class="badge badge-primary badge-pill">B</span>
   Lionel Melin
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center jaune">
<span class="badge badge-primary badge-pill">C</span>
   OSMEL GIBI
  </li>
</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
ul li{ width : 150px;}
 
 
.rouge { border-right: solid 4px red;}
.vert { border-right: solid 4px green;}
.jaune { border-right: solid 4px yellow;}
.noir { border-right: solid 4px #000000;}
.legende { display: inline-block;
                 border: solid 1px #000000;
                 height:12px; 
                 width: 12px;
              }
.lrouge { background-color: red;}
.lvert { background-color: green;}
.ljaune { background-color: yellow;}
.lnoir { background-color: #000000;}

pour la légende un div avec des spans

Code:

1
2
<div> <span class="legende lrouge">&nbsp;</span>légende rouge<span class="legende lvert">&nbsp;</span>légende verte<span class="legende ljaune">&nbsp;</span>légende jaune<span class="legende lnoir">&nbsp;</span>légende noire
</div>

https://jsfiddle.net/7Lnjprq2/3/

Salut @SpaceFrog,
merci pour la reponse.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function(){
  var jsonData = [
    {"class":"A","name":"Jhon PAPOU","color":"red"},
    {"class":"B","name":"Lionel Melin","color":"green"},
    {"class":"C","name":"Osmel GIBI","color":"blue"},
    {"class":"D","name":"James DADIN","color":"orange"},
  ];
  $('.list-group').after($('<div class="d-flex text-capitalize color-lebel"/>'));
  jsonData.map(function(k,v){
    $('.list-group').append('<li class="list-group-item d-flex justify-content-start1 align-items-center">'+
      '<span class="badge badge-primary badge-pill">'+k.class+'</span>'+
      '<span class="m-auto">'+k.name+'</span>'+
      '<span class="h-100 d-block position-absolute" style="background:'+k.color+'; width:5px; right:0; top:0;"></span>'+
      '</li>');
    $('.color-lebel').append('<div class="d-inline-block mr-2 my-2"><span class="badge" style="background:'+k.color+'">&nbsp;&nbsp;</span> '+k.color+'</div>');
  });
});

j'ai pu faire aussi comme ça. merci beaucoup , je vais fermer la discussion.