We Keep Coding

limit displayed selections tom-select

I am using the javascript lib Tom-Select. I would like to limit the display of how many items have been selected. I do not want to limit the number of actual choices - only how many are displayed. Standard functionality shows all selections in a growing box. I would like to set a limit of 3. Then if a user selects more than 3 the box will no longer grow but simply say 4 items selected (or 5, 6, etc). Bonus points if I could limit selections by the element width instead of a count (forcing the element to always remain on one line of the form).

You could trick using the render method and the items.length array, but how will you then let your users delete their own choices as you don't display the selected items?
render: {
option: function (data, escape) {
return '<div class="d-flex"><span>' + escape(data.text) + '</span></div>';
},
item: function (data, escape) {
//return '<span class="tag is-info mb-1 mr-1">' + escape(data.text) + '</span>';
if (this.items.length >= 3){
return '<span class="tag is-info mb-1 mr-1" style="display:none">' + escape(data.text) + '</span>';
}else{
return '<span class="tag is-info mb-1 mr-1">' + escape(data.text) + '</span>';
}
}
}

formatting HTML from arrays in a JSON file

I've gone through 5-6 questions on SO before asking _ The other questions appear to refer to formatting all the data from complete JSON files _ This question is about formatting the elements of an array parsed from a JSON file _
The complete test page is online here but for the sake of brevity on this page I have shortened the JSON data _
{
"PGRgames" : [
{
"id" : "Abzu",
"fullName" : "Abzû",
"PEGI" : 7,
"platforms" : ["PS4"],
"genres" : ["Adventure", "Simulation"],
"image" : "img_Abzu.png",
"details" : "ABZÛ is a beautiful underwater adventure that evokes the dream of diving. Immerse yourself in a vibrant ocean world full of mystery and bursting with colour and life."
},
{
"id" : "AdventurePirates",
"fullName" : "Adventure Time: Pirates Of The Enchridion",
"PEGI" : 7,
"platforms" : ["XBoxOne", "PS4", "Switch"],
"genres" : ["Adventure", "Sandbox", "KIDS"],
"image" : "img_AdventurePirates.png",
"details" : "The Land of Ooo is underwater and it’s up to Finn and Jake to find out why. Join our heroes as they explore the high seas."
},
{
"id" : "KingdomCome",
"fullName" : "Kingdom Come: Deliverance",
"PEGI" : 18,
"platforms" : ["XBoxOne", "XBoxOneX", "PS4"],
"genres" : ["Action", "RPG"],
"image" : "img_KingdomCome.png",
"details" : "Massive realistic open world: Majestic castles, vast fields, all rendered in stunning high-end graphics. Solve quests in multiple ways, then face the consequences of your decisions."
}
]
}
My JS code is _
<script>
let askHTTP = new XMLHttpRequest();
askHTTP.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let gamesList = JSON.parse(askHTTP.responseText);
let output = '';
let PGRgames = gamesList.PGRgames;
for (let i = 0; i < PGRgames.length; i++) {
output += '<div class="col-md-3 col-sm-6 padBox"><div class="gameBox center"><img src="media/'
+ PGRgames[i].image
+ '" /><div class="horizBuffer"></div>'
+ '<div class="center"><span class="fontBrand1 smallText"><strong>' + PGRgames[i].genres + '</strong></span></div>'
+ '<div class="horizBuffer"></div>'
+ '<div class="left"><span class="fontBlack text">' + PGRgames[i].details + '</span></div>'
+ '<div class="horizBuffer"></div>'
+ '<div class="center"><span class="fontBlack text"><strong>' + PGRgames[i].platforms + '</strong></span></div>'
+ '</div></div>';
}
document.getElementById('displayGames').innerHTML = output;
}
};
askHTTP.open("GET", "js/PGRgames.json", true);
askHTTP.send();
</script>
If you look at the content on the page I have linked to you'll see that PGRgames.genres & PGRgames.platforms have commas but no spaces between the array elements _ Also that the arrays are not conforming to the area they are supposed to be confined to _
Formatting these two arrays is specifically what my question refers to _ I'd be grateful for any assistance : )

You can use .join() to format array to string.
var array = ["foo", "bar", "tet"];
console.log('formatted:', array.join(', '));
console.log('tostring:', ''+array);
In your case replace PGRgames[i].genres with PGRgames[i].genres.join(', ') and other array outputs in similar manner.

your problem is that you write this line:
PGRgames[1].platforms
and it is like writing this:
PGRgames[1].platforms.toString()
and what it does is just use the tostring of each element in the array and connect them with comma.
what you need to do is use join to tha array and format it as you need like this:
PGRgames[1].platforms.join(', ')

Javascript - How to get star rating from object array field rating?

I have this object array:
var test_data = [
{
"id" : "Test01", //Has to be a string form ID
"test_info" : "This is the test information",
"test_rating" : 5
},
{
"id" : "Test02", //Has to be a string form ID
"test_info" : "This is the test information",
"test_rating" : 2
}
As it stands I am using the following to populate a unordered list (but it is only populating the id)
fieldOutputId.forEach(function(id) {
$("#idList").append('<li>' + id +" "+ "</li>");
});
I am wondering how to get Stars appearing to the right with the value of test_rating that's stored in fieldOutputRating like showing up like this picture (Stars being the red text)
Fig1 :
-----EDIT-----
Thanks to #ChrisG this gets it inline, id & test_rating:
test_data.forEach(function(item) { $("#idList").append('<li>' + item.id+ '<div class="fa fa-star">'+ item.test_rating+ "</div></li>"); })
With the above code I am trying to get the stars to appear in-line (done) and as stars using font-awesome library with a class="fa fa-star
This is what the above is giving:
So its getting the test_rating but not giving any stars for it.
Any help is appreciated??

Something like this?
const test_data = [
{
"id" : "Test01",
"test_info" : "This is the test information",
"test_rating" : 5
},
{
"id" : "Test02",
"test_info" : "This is the test information",
"test_rating" : 2
}
];
test_data.forEach(({id, test_rating}) => {
$("#idList").append(`<li>${id} ${'*'.repeat(test_rating)}</li>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="idList" />

You need to build up the 'star rating' from the input, like below:
test_data.forEach(function(data) {
let rating_str = '';
for (let i = 0; i < data.rating; i++) rating_str += '*';
$("#idList").append('<li>' + data.id +" "+ "<span>" + rating_str + "</span></li>");
});
If your 'star' is some image, instead of just '*' like in my code example, you can do rating_str += '<img src="..." />'

How to count and show number of inner elements for every treetable branch?

I have a grouped (by users' lastnames) TreeTable (Webix). Here's the config:
columns:[
{ id:"lastname", template:function(obj, common){
return common.icon(obj, common)+obj.lastname
} }
],
scheme:{
$group:{
by:function(obj){
return obj.lastname.substring(0,1); // grouping by first letter
},
map:{
lastname:[function(obj){
return obj.lastname.substring(0,1);
}]
}
}
},
The snippet (the same config, another dataset)
With the map property template shows the first letter as the branch title. But I can't figure out how to show the count of the items in each branch. Something like
A (18)
B (5)
and so on. How to do this? Thanks.

you have to customize the template function of your columns such that for obj.$level==1 in the group it shows the count of elements (obj.$count) along with the title and for others it shows only the title. The required code is below :
webix.ui({
view:"treetable",
id:"treetable",
columns:[
{
id:"title", header:"Film title", width:250,
template:function(obj, common){
if(obj.$level == 1){
return common.icon(obj, common)+ obj.title + " ( " + obj.$count + " ) " ;
}
else{
return common.icon(obj, common)+ obj.title ;
}
}
}
]
/****Your Code***/
});

Show JSON data based on checkbox choice

I'm wondering if it is possible to show specific JSON data, based on a choice made with a checkbox.
At this moment I have specific JSON data with peoples names, department, sex and internet usage.
I've managed to show this data by name, department and I drew a bar for the usage.
I've made two checkboxes that show this JSON data when checked. However at this particular moment they still show the same data. I need to find a way to sort it out, after trying certain things, it's kinda getting lost on me.
This is the code for getting the JSON data, showing it and the checkboxes + the code behind it:
JS :
$(document).ready(function() {
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="female") {
$(".female").toggle();
}
if($(this).attr("value")=="male") {
$(".male").toggle();
}
});
});
ajax();
function ajax() {
$.ajax({
url:"wifi_data.json",
dataType:"json",
success: function(data) {
//if(data.geslacht == "man") {
$.each(data, function(index, item) {
$('#females').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
'<br>Usage: ' + '<div style="width:'+
data[index].verbruik*0.001
+'px;height:10;border:2px solid ; background-color:red;"></div>' +
'<div style="'+ '<br>Sex: ' +
data[index].geslacht +'"></div>' );
});
//}
//if(data.gelsacht =="vrouw") {
$.each(data, function(index, item)
{
$('#males').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
"<br>Usage: " + '<div style="width:'+
data[index].verbruik*0.001
+'px;height:10;border:2px solid ; background-color:red"></div>' );
});
//}
}
})
}
HTML :
<div>
<label><input type="checkbox" name="colorCheckbox" value="female"> Show Female Members</label>
<br>
<label><input type="checkbox" name="colorCheckbox" value="male"> Show Male Members</label>
</div>
<div class="female box">
<div id="females"></div>
</div>
<div class="male box">
<div id="males"></div>
</div>
What I've tried to do here with the commented parts of the code (and some code that is removed) is to only append males when "geslacht"(sex) is man(male) or vrouw(female).
I've also tried to append the sex and to then put it in a div and hide it. In order to maybe check if male or female is checked, then show the hidden div's with all the men or females in it.
My issue is that I'm having a huge brain fart on the part how to check what is checked, and then only gather the males or females from the JSON file based on choice.
The JSON looks like this:
{
"46": {
"voornaam": "Sergio",
"achternaam": "Bloemenouw",
"verbruik": "100000",
"afdeling": "FHACI",
"geslacht": "man",
"verbruikPercentage": "18.2%"
},
"25": {
"voornaam": "Chayenne",
"achternaam": "Aalberink",
"verbruik": "200000",
"afdeling": "FHEHT",
"geslacht": "vrouw",
"verbruikPercentage": "36.4%"
},
and so on...
Hopefully someone can steer me into the correct direction.
I think the most important thing I need to figure out is how to only show either the females or the males including their name, usage("verbruikPercentage") and department("afdeling")

Your question contains two problems. One is to separate data into male and female parts, and the other one is about showing/hiding the elements.
For the data separation, you need to do the if statement for each data item, since it is the item that contains the geslacht property.
$.each(data, function(index, item) {
var target = item.geslacht === 'man' ? $('#males') : $('#females');
target.append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam +
'<br>Department: ' + data[index].afdeling +
'<br>Usage: ' + '<div style="width:'+ data[index].verbruik*0.001 +
'px;height:10;border:2px solid ; background-color:red;"></div>' +
'<div style="'+ '<br>Sex: ' + data[index].geslacht +'"></div>');
});
For the toggling, I didn't see anything wrong for now. You can focus on the data processing part for now, and do more debugging on it later.

Your if condition should be inside $.each() loop as follows:
$.each(data, function(index, item) {
if(item.geslacht == "man") {
}
else if(item.geslacht == "vrouw")
{
}
})