We Keep Coding

Targeting variables for pluralisation with javascript -

I'm working on an integration of the search tool algolia within one of my projects. I have the following lines of code (with dummy variables added for completeness):
var nbHits = 1
var processingTimeMS = 200
$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + '</b> results in <b>' + processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-12" id="hits-stat">
</div>
</div>
What I'm looking for is an easy way to target the "results" in the element above and make it pluralised, e.g., for let nbHits = 1 I want this to read "result". Is there such a method that would take up approx 3/4 lines of code maximum such that I am not adding too many kb's to my script? I've seen a few examples which are adding approx 20kbs.
I'm sure I should be using React/Vue but I'm still jQuerying my life away :'(

$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + `</b> result${nbHits==1 ? '' : 's'} in <b>` + processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);

You can use conditional statement inside .html() like so:
$('#hits-stat').html('<div class="float-right p-3">Found <b>' +
nbHits + (nbHits > 1 ? '</b> results in <b>' : '</b> result in <b>')+ processingTimeMS + '</b>ms. ' +
'Powered by Algolia</div>'
);

Problems posting data forms created by javascript

I now am struggling with this for a couple of days and want to finish it.. Let's explain the html/js/php project. Via select boxes people can choose products and an amount. These products will be inserted via javascript into a basket.
Inside the basket I made an attribute with a form. In this form the products will be added with javascript with < li > tags. I understood that li tags could not be posted so I made a hidden input for every product. When I try to post the data after that it does not work.
In Opera and Chrome he just gives an empty array and in Firefox he gives an 404 Not found exception on the post. Let's explain some code:
First the html page. This is the shop with the products and the basket.
In the javascript a fuction get calls when the 'add' button is clickes:
(this is the code that add's the elements to the html)
function addProduct() {
var productAdded = $('<li class="product" name="product' + i + '">' +
'<input type="hidden" name="p' + i + '"value="' + product + "/" + qty + "/" + price + '" />' +
'<div class="product-image">' +
'<a href="image">' +
'<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
'</div>' +
'<div class="product-details">' +
'<a style="color: black;">' + product + '</a>' +
'<span class="price">€ ' + price + '</span><br>' +
'<div class="quantity">' +
'<label>Aantal: ' + qty + '</label> <div class="actions">' +
' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
cartList.prepend(productAdded);
}
The **Php ** part of the endpage that needs to get the Form data is the following:
<div class="row">
<div class="col-md-2 col-sm-12 ">
<h3>Bestelling:</h3>
</div>
<div id="bestellingklant">
<?php
print_r($_POST);
?>
</div>
</div>
There maybe are some better ways to do this. But I can't see any mistake and I tried a lot of things. It seems though not so difficult. This is the Error i get with Firefox:
Thanks a lot

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.

As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

Dynamic angularjs template

I am trying to create a directive this way -
scope.nodeTemplate = '{{node.nodeText}}';
Part of template
'<ul>' +
'<li class="tree-node" data-ng-repeat="node in nodes">' +
'<span>' + scope.nodeTemplate + '</span>' +
'</li>' +
'</ul>'
Based on some condition I would like to change the nodeTemplate and it can be an html string like -
'<input type="text"/>'
But the issue is when it try to do this thing angular does not render the html. It simply puts the html string. I am kind of stuck here. Can someone suggest some solution?

You need to use ng-bind-html-unsafe like:
'<span ng-bind-html-unsafe="nodeTemplate"></span>'

Conditional javascript for Google Map values

I'm passing some variables to my google maps scrip to output an address in an info window. The variables are being pulled from a database, but not all of them will always exist. Using the following code I sometimes end up with multiple <br> tags in a row, meaning I get awkward breaks in the content.
So my question is how do I make it conditional so that only the variables that exist will display, followed by a <br>?
var contentString = '<div id="map_info">'+
'<h4>' + gmapsstring.gmapaddressname + '</h4>'+
'<div id="bodyContent">'+
'<p>' + gmapsstring.gmapaddressstreet + '<br>' +
gmapsstring.gmapaddressline2 + '<br>' +
gmapsstring.gmapaddressline3 + '<br>' +
'<span class="gmap_postcode">' + gmapsstring.gmapaddresspostcode + '</span></p>'+
'</div>';
Any suggestions would be greatly appreciated.
Thanks

You can use the length property of the variables, so you'd have something like:
var contentString = '<div id="map_info">';
if( gmapsstring.gmapaddressname.length > 0 ) {
contentString += '<h4>' + gmapsstring.gmapaddressname + '</h4>';
}
and so on. Or even better, you can loop through the properties, using a similar code.