список отображения группы с json данными

Question

Я хочу отобразить свой список людей с такой структурой данных json, как эта

<pre>
   <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>
    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"},
    ]';

Я хочу отобразить свой список с четырьмя маленькими цветными плитками внизу.

firstview

Я не могу достичь желаемого net дисплея. Есть идеи?

Answer 1

Вы можете использовать функцию map для jsonData для манипуляции в HTML UI . Поэтому без написания css кода для управления пользовательским интерфейсом с помощью Bootstrap4 Classes .
Надеюсь, приведенный ниже фрагмент поможет вам.

$(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>');
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row">
    <div class="col-sm-12">
      <ul class="list-group"></ul>
    </div>
  </div>
</div>

Answer 2

Вы можете попробовать приведенный ниже фрагмент кода (пожалуйста, игнорируйте стили, так как оригинальные классы не известны).

Здесь вы можете перебирать json данные и создавать необходимые html, а также итерировать цветовые коды в массив, а затем использовать его для легенд. убедитесь, что вы перемещаете span внутри li, а не снаружи

$(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"},
    ];
   
    var colors = [];
    var $ul = $('#list-group');
    $.each(jsonData, function(key, value){
        var html = '<li class="list-group-item d-flex justify-content-between align-items-center"><span class="badge badge-primary badge-pill">' + value.class + '</span>' + value.name + '<span style="background-color:' + value.color + ';">&nbsp;&nbsp;</span></li>';
        $ul.append(html);
        if(colors.indexOf(value.color)==-1) {
           colors.push(value.color);
        }
    });
    
    var colorHTML = '';
    $.each(colors, function(index, value){
    //console.log(value);
       colorHTML += '<span style="background-color:' + value + ';">&nbsp;&nbsp;</span>&nbsp;<span>' + value +'</span>&nbsp;';
    });
    //console.log(colorHTML);
    $ul.after(colorHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="list-group" id="list-group"></ul>

Answer 3

Можете ли вы попробовать следующий код для создания html

<body  id="banner">				
<ul id="mylists">
</ul>	
</div>
<style>
.list-group-item {
padding: 8px;
list-style: none;
border: solid 1px #eee;
width: 300px;
border-right-width: 5px;
}

.badge {
padding: 3px 10px;
background: #eee;
}
.rouge {
border-right-color: red;
}
.vert {
border-right-color: yellow;
}
.jaune {
border-right-color: green;
}
.noir {
border-right-color: blue;
}
span.name-span {margin-left: 10px;}
</style>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
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"}
];
jQuery(document).ready(function($){		
	$.each(jsonData, function(key,value) {
		var html = '';				
		html+='<li class="list-group-item d-flex justify-content-between align-items-center '+value.color+'" style="border-right-color:'+value.color+';">';
		html+='<span class="badge badge-primary badge-pill">'+value.class+'</span>';
		html+='<span class="name-span">'+value.name+'</span>';
		html+='</li>';
		$("#mylists").append(html);
	}); 
});
</script>	

Answer 4

.name-span {
  margin-left: 10px;
}

.list-group-item {
  position: relative;
}

.color-span {
  position: absolute;
  right: 5px;
  top: 60%;
  transform: tranlateX(-50%);
  width: 20px;
  height: 10px;
  border-radius: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="banner">
  <ul id="mylists">
  </ul>
</div>

<script type="text/javascript">
  var jsonData = [{
      "class": "A",
      "name": "Jhon PAPOU",
      "color": "red"
    },
    {
      "class": "B",
      "name": "Lionel Melin",
      "color": "blue"
    },
    {
      "class": "C",
      "name": "Osmel GIBI",
      "color": "green"
    },
    {
      "class": "D",
      "name": "James DADIN",
      "color": "yellow"
    }
  ];
  jQuery(document).ready(function($) {
    $.each(jsonData, function(key, value) {
      var html = '';
      html += '<li class="list-group-item d-flex align-items-center">';
      html += '<span class="badge badge-primary badge-pill">' + value.class + '</span>';
      html += '<span class="name-span">' + value.name + '</span>'
      html += '<span class="color-span" style="background-color:' + value.color + '"></span>';
      html += '</li>';
      $("#mylists").append(html);
    });
  });
</script>

Answer 5

L oop jsonData и используйте его значения в нем. Вы можете использовать forEach или для или for-of Если есть какая-либо другая проблема, укажите ее