classé les vehicules par groupes

15 février 2019 à 19:48:02

salut, je suis confronté a une problème. je voudrais afficher les véhicules par groupes. lorsque je rencontre un groupe, j'affiche le nom du groupe et tous les véhicules appartenant a ce groupe. présentement, il m'affiche pour chaque véhicule, le nom du groupe. je voudrais un nom de groupe, puis la liste des véhicules et ainsi de suite. voici mon script :

function objectLoadList() {
var $self = $('#side_bar_objects_object_list_grid');
    var id;
	var j ;
    //test de l'existence de l'id
    if ($self.length > 0) {
		console.log("true");
        if ($('ul#side_bar_objects_object_list_grid li').length >= 1) {
			console.log("true1");
         for (id in $self.empty(), settingsObjectData) {
                var params = settingsObjectData[id];
                if ("true" == params.active) {
					var name_object = params.name.toLowerCase();
                    var group_id = params.group_id;
					console.log(group_id);
					var group_name = settingsObjectGroupData[group_id].name ;
					var html1 = '<div class="groupe_content" style="background: #fff;padding: 9px;height: 39px;">'
							+'<div class="groupe_name" style="font-size: 14px;font-weight: 600;">'+group_name+'</div>'
							+'<div class="_daea"><img src="/eye.svg" /></div>'
							+'<div class="_daea"><img src="follow.svg" /></div>'
							+'<div class="_daea"><i style="margin-top:2px;" class="fas fa-caret-up"></i></div>'
							+'</div>';
					$self.append(html1);
					for (j in group_id ){
						var plate_number = params.plate_number;
                    var model = params.model;
					var html='<ul>'
							+'<li>'	
		                    +'<div class="content_objet">'
							+'<ul>'
							+'<li class="top_content">'
							+'<div class="titel_content">'
							+'<h4>'+name_object+'</h4>'
							+'<span>'+model+'</span>'
							+'</div>'
							+'<div class="bootton_rigth">'
							+'<span><a href="#"><img style="width: 25px;" type="action" src="ressources/images/icon/ic_more_vert.png"></a></span>'
							+'</div> '
							+'</li>'
							+'<li class="middle_content">'
							+'<div class="left_content">'
							+'<ul>'
			                +'<li title="statut du vehicule" class="autologo">'
			                +'<a href="#"><image width="100%" height="auto" src="' + params.icon + '" style="width: 26px;"/></a>'
			                +'</li>'
			                +'<li title="vitesse">'
			                +'<h1 class="speed" id="object_speed_' + id + '">'+ 0 +'</h1>'
							+'<span>' + la.UNIT_SPEED +'</span>'
			                +'</li>'
			                +'</ul>'
			                +'</div>'
							+'<div  class="infos">'
							+'<span>'
							+'<div><img src="/theme/images/street-view.svg" />yvan</div>'
			                +'<div title=""><img src="/theme/images/address.svg" />xx, xx, xx</div>'
							+'<div ><img src="/theme/images/nearest-zone.svg" />xxxx(0.25 km)</div>'
							+'<div><img src="/theme/images/engine-hours.svg" /> 2019-02-14 08:36:47</div>'
			                +'</span>'
							+'</div>'
		                    +'</li>'
		            		+'<li class="hide_content">   '           
		            		+'</li>'
		            		+'<li class="footer_content">'
    						+'<div class="ordometri_img"><img src=https:/theme/images/odometer.svg" /></div>'
							+'<div title="ordometre journalier" class="_mdda">50<br>km</div>'
							+'<div title="ordometre" class="_mdda">730<br>km</div>'
							+'<div class="option_footer">'
							+'<ul>'
							+'<li  class="connection" id="object_connection_' + id + '">' + getConnectionIcon(0) + '</li>'
							+'<li><img src="/theme/images/eye.svg" /></li>'
							+'<li><img src="/theme/images/follow.svg" /></li>'
							+'<li><img src="/theme/images/plus.svg" /></li>'
							+'</ul>'
							+'</div>'
							+'</li>'
							+'</ul>'
							+'</div>'
							+'</li>'
							+'</ul>';
$self.append(html);
					}
                    

                }
            }
        }
    }
    
}

merci

-
Edité par beza88 15 février 2019 à 19:52:05

A Vaincre sans péril on finit par triompher sans gloire -> le Cid de corneille

Arthur222

16 février 2019 à 16:02:26

Un titre de groupe et ses vehicules en-dessous, voila un exemple en js, pour du jquery il y a $.each :

<script>
var j = {
	"peugeot":[{
		"id":0,
		"annee":"1995",
		"titre":"208 GTI"
	},
	{
		"id":1,
		"annee":"2005",
		"titre":"3008 GT"
	}],
	"renault":[{
		"annee":"deux"
	}]
}
for (key1 in j){
	l(key1);
	for (index in j[key1]) {
		var v = j[key1][index];
		for(key2 in v) l(key2+" : "+v[key2]);
	}
}

function l(p){
	console.log(p);
}

</script>

beza88

17 février 2019 à 17:53:27

salut, j'ai réussi a classer les véhicules par groupe sauf que les "li" que je crée ne s'affiche pas sur l'interface graphique.

aidez moi a voir plus clair. qu'est ce qui bloque ?

function objectLoadList() {
	var $self = $('#side_bar_objects_object_list_grid');
    var id;
	var imei;
	var tableau_grp_id= new Array();
//test de l'existence de l'id
if ($self.length > 0) {
    console.log("true");
    if ($('ul#side_bar_objects_object_list_grid li').length >= 1) {
		$.each(settingsObjectData, function( index, value ) {
	  var found = tableau_grp_id.find(function(element) {
		  if(element== value.group_id){
		  	return true; 
		  }
		});
	  if(!found){
	  	tableau_grp_id.push(value.group_id);
	  }
	});
		//filtreobjet fonction qui return un objet resul qui contient
		function filtreobjet(index) {
			var resul= new Array();
		  for (id in $self.empty(), settingsObjectData) {
            var params = settingsObjectData[id];
            if ("true" == params.active) {
				if(index==params.group_id){
					console.log("supression des precedents li");
					resul.push({id:id,objet:settingsObjectData[id]});
					
				}
			}
	   		}
			return resul;
		}
		//tableau_grp_id contient id de chaque groupe
	tableau_grp_id.forEach(function(tableau_grp_id_item) {
		
		var id_group = tableau_grp_id_item[0];
		var group_name = settingsObjectGroupData[id_group].name;
		console.log(group_name);
		var entete='<li><div class="groupe_content" style="background: #fff;padding: 9px;height: 39px;">'
                        + '<div class="groupe_name" style="font-size: 14px;font-weight: 600;">'+ group_name +'</div>'
                        + '<div class="_daea"><img src="/theme/images/eye.svg" /></div>'
                        + '<div class="_daea"><img src="/theme/images/follow.svg" /></div>'
                        + '<div class="_daea"><i style="margin-top:2px;" class="fas fa-caret-up"></i></div>'
                        + '</div></li>';	
		 $self.append(entete);
		const result = filtreobjet(tableau_grp_id_item);
		//console.log(result);
		//result contient id et les infos des voitures de chaque groupe
		result.forEach(function(result_item) {
			//result_item contient les information d'une voiture
			var name_object = result_item.objet.name.toLowerCase();
			var plate_number = result_item.objet.plate_number;
            var model = result_item.objet.model;
			var encodedKeyOrRange;
				encodedKeyOrRange = getDriver(result_item.id,result_item.objet.params);
				if (0 != encodedKeyOrRange) {
					console.log(encodedKeyOrRange.driver_id ,encodedKeyOrRange.name);
					console.log("recuperation des infos du chauffeur reussie");
				}
            /*        
			html=html+'<ul> <li>'
                            + '<div class="content_objet">'
                            + '<ul>'
                            + '<li class="top_content">'
                            + '<div class="titel_content">'
                            + '<h4>' + name_object + '</h4>'
                            + '<span>' + model + '</span>'
                            + '</div>'
                            + '<div class="bootton_rigth">'
                            + '<span><a href="#"><img style="width: 25px;" type="action" src="ressources/images/icon/ic_more_vert.png"></a></span>'
                            + '</div> '
                            + '</li>'
                            + '<li class="middle_content">'
                            + '<div class="left_content">'
                            + '<ul>'
                            + '<li title="statut du vehicule" class="autologo">'
                            + '<a href="#"><image width="100%" height="auto" src="' + result_item.icon + '" style="width: 26px;"/></a>'
                            + '</li>'
                            + '<li title="vitesse">'
                            + '<h1 class="speed" id="object_speed_' + id + '">' + 0 + '</h1>'
                            + '<span>' + la.UNIT_SPEED + '</span>'
                            + '</li>'
                            + '</ul>'
                            + '</div>'
                            + '<div  class="infos">'
                            + '<span>'
					if (0 != encodedKeyOrRange) {
                            + '<div><img src="/theme/images/street-view.svg"/>'+ command_module_id +'</div>'
					}
                            + '<div><img src="/theme/images/address.svg" /><span id="'+ id +'_address"></span></div>'
                            + '<div ><img src="/theme/images/nearest-zone.svg" />lq plus proche</div>'
                            + '<div><img src="/theme/images/engine-hours.svg" /> 2019-02-14 08:36:47</div>'
                            + '</span>'
                            + '</div>'
                            + '</li>'
                            + '<li class="hide_content">   '
                            + '</li>'
                            + '<li class="footer_content">'
                            + '<div class="ordometri_img"><img src="/theme/images/odometer.svg" /></div>'
                            + '<div title="ordometre journalier" class="_mdda">50<br>km</div>'
                            + '<div title="ordometre" class="_mdda">730<br>km</div>'
                            + '<div class="option_footer">'
                            + '<ul>'
                            + '<li  class="connection" id="object_connection_' + id + '">' + getConnectionIcon(0) + '</li>'
                            + '<li><img src="/theme/images/eye.svg" /></li>'
                            + '<li><img src="/theme/images/follow.svg" /></li>'
                            + '<li><img src="/theme/images/plus.svg" /></li>'
                            + '</ul>'
                            + '</div>'
                            + '</li>'
                            + '</ul>'
                            + '</div>'
                            + '</li>'
                            + '</ul><li>';
							*/
		 console.log(result_item);
		});
		//console.log(result);
	});
	//console.log(tableau_grp_id);
	}
	
}
}

A Vaincre sans péril on finit par triompher sans gloire -> le Cid de corneille

AliasDmc

18 février 2019 à 19:17:26

Bonjour beza88,

Il est possible d'avoir un codepen complet html + js ?

Découvrez les Css avec la zonecss.fr