We Keep Coding

Javascript: Split string by loop in loop

I've got string with IDs and Names separated by ^ (between ID and Names) and ; (between sets) for example
var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";
I need to get something like this
$('#1').html('<option value="1">John Smith</option><option value="2">Sophia Williams</option><option value="3">Emily Johnson</option>');
I tried loops but got stuck:
var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";
var a = string.split(";"),
i;
for (i = 0; i < a.length; i++){
if (a[i] !== ""){
var b = a[i].split("^"),
i2;
for (var i2 = 0; i2 < b.length; i++) {
var name = b[i2];
console.log(name);
}
}
}
Im not sure that it's good way

Using Option()
new Option(text, value, defaultSelected, selected)
var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;"
var options = string.split(';').map(i => {
return new Option(...i.split('^').reverse())
})
$('#1').html(options)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="1"></select>

You can build a HTML string inside your loop by grabbing the first element from b as the value for your option and the second element from b to be the text in your option tag. You can then add a string HTML version of the option tag using these text and value components to the accumulated string each iteration of your for-loop:
var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";
var a = string.split(";");
var html_str = "";
for (var i = 0; i < a.length-1; i++) { // loop to a.length-1 so you don't need an if-statement to check blanks
var b = a[i].split("^");
var val = b[0];
var txt = b[1];
html_str += '<option value="' + val +'">' + txt +'</option>';
}
$('#one').html(html_str);
console.log(html_str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="one"></select>
An alternative approach could be to use a regular expression to get the components from your string an convert it to your desired HTML string by using .replace() with a replacement function:
var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";
var html_str = string.replace(/(\d+)\^([^;]+);/g, (_, val, txt) => `<option value="${val}">${txt}</option>`);
$('#one').html(html_str);
console.log(html_str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="one">
</select>
The above regular expression:
(\d+)\^: Groups any digits (group 1) which have a carat ^ following them
([^;]+);: Groups any characters which are not a semi-colon ; (group 2), which are followed by a semi-colon.
These groups are formed for each occurrence in your string, and then used in the .replace() method's callback, where group 1 is val and group 2 is txt.

chosen-select mutliple select update from an array

I'm using the chosen plugin for a multiple select. I want to retrieve the customer pre-selected values from the database and display them in the multiple select when i return the rest of the data.
The following code works fine:
$('.chosen-select').val(["Test1", "Test2"]).trigger('chosen:updated');
However when I try and put a variable in there like below, it doesn't populate the values.
$('.chosen-select').val([res]).trigger('chosen:updated');
I've pulled the data out and I then loop through the array and store it in a variable. I've checked the contents of the res variable and it's correct, so now I'd like to reference it within the square brackets but it doesn't work, and it doesn't throw any errors. Any help would be much appreciated!
var i;
var res = "";
for (i = 0; i < array.length; i++) {
array[i] = $.trim(array[i]);
var buildValue2 = '"' + array[i] + '", ';
if (i == array.length - 1) {
/* this is the last one so no comma*/
buildValue2 = '"' + array[i] + '"';
}
res = res.concat(buildValue2);
}
alert(res);
$('.chosen-select').val([res]).trigger('chosen:updated');

Possible to display an Array with for loop and InnerHTML?

I just wanted to display my Array inside of either an div or a heading.
The code i posted down below only displays the last part of the "List".
When i tried to use: document.write instead, everything worked fine.
Is there any special trick to display the list the same way document.write does using my Code below?
var Users = ["Till", "Didi", "Klausi", "Heinz"];
for (var i = 0; i < Users.length; i++) {
document.querySelector("div").innerHTML = Users[i] + " is always on my page " + "<br>";
}

Build the whole HTML first by iterating on the array and concatenating strings. And then set it as innerHTML of the div.
var Users = ["Till", "Didi", "Klausi", "Heinz"];
var _html = "";
for (var i = 0; i < Users.length; i++) {
_html += Users[i] + " is always on my page " + "<br>";
}
document.querySelector("div").innerHTML = _html;
<div></div>

Every time the loop runs it inserts the current iterable item into the HTML, replacing the one previous. So add a variable outside of the loop and append to it using var x += User[i].

var separator = ' is always on my page<br>';
var html = Users.join(separator) + separator;
document.querySelector("div").innerHTML = html;
// writes
// "Till is always on my page<br>Didi is always on my page<br>Klausi is always on my page<br>Heinz is always on my page<br>"

Filter table data from first character of string in jquery/javascript

I have a table with some records and a textbox. I want to filter table data based on string entered in textbox on keyup event.
Currently I am using a code block which filter the table data but it search the record in table which exist anywhere in the string.
For example:- If I enter 'ab' in textbox it filter the table record with strings contains the keyword 'ab' like abcd, babd, cdab etc.
But my requirement is when I enter the keyword 'ab' in textbox it search only those string which starts from 'ab' like abcd, abdc etc.
Here is my current code:-
function Search_Gridview(strKey, strGV) {
var strData = strKey.value.toLowerCase().split(" ");
var tblData = document.getElementById(strGV);
var rowData;
for (var i = 1; i < tblData.rows.length; i++) {
rowData = tblData.rows[i].cells[3].innerHTML;
var styleDisplay = 'none';
for (var j = 0; j < strData.length; j++) {
if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
styleDisplay = '';
else {
styleDisplay = 'none';
break;
}
}
tblData.rows[i].style.display = styleDisplay;
}
}
Please help guys......

You can filter with jQuery the columns that contain a string beginning with e.g. "ab" of this way:
var re = $("#TABLE_ID td").filter(function(i){ return this.innerHTML.startsWith("ab") })
//You can after, get the values of each td of the result of this way
re.map(function(i){return this.innerHTML})

You can use RegExp's test method.
var stringData = [
'aaa', 'aab', 'aac',
'aba', 'abb', 'abc'
];
var searchPrefix = 'ab';
var result = stringData.filter(function (str) {
// return true if str has prefix with searchPrefix.
return (new RegExp('^' + searchPrefix)).test(str);
});
console.log(result);
JavaScript Regexp Reference

This appears the most elegant solution.
To change search behavior from "exists anywhere in the data" into "data starts with ". You only need to change one single character, on one single line of your original code and nothing more.
Change this line from this..
if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
into this...
if (rowData.toLowerCase().indexOf(strData[j]) == 0)
What it does is forces the indexOf() to address zero, instead of allowing mid-string matches.
Below is the whole (already modified) code for copy and paste into a project, such as a html table filter.
function Search_Gridview(strKey, strGV) {
var strData = strKey.value.toLowerCase().split(" ");
var tblData = document.getElementById(strGV);
var rowData;
for (var i = 1; i < tblData.rows.length; i++) {
rowData = tblData.rows[i].cells[3].innerHTML;
var styleDisplay = 'none';
for (var j = 0; j < strData.length; j++) {
if (rowData.toLowerCase().indexOf(strData[j]) == 0)
styleDisplay = '';
else {
styleDisplay = 'none';
break;
}
}
tblData.rows[i].style.display = styleDisplay;
}
}
Search_Gridview() = the function's name.
strKey = input search characters
strGV = ID of html table></table

Writing an array in Google Spreadsheets

I'm trying to learn javascript, so I decided to code a script in Google Apss Script to list all emails with attachment. Until now, I have this code:
function listaAnexos() {
// var doc = DocumentApp.create('Relatório do Gmail V2');
var plan = SpreadsheetApp.create('Relatorio Gmail');
var conversas = GmailApp.search('has:attachment', 0, 10)
var tamfinal = 0;
if (conversas.length > 0) {
var tam = 0
var emails = GmailApp.getMessagesForThreads(conversas);
var cont = 0;
for (var i = 0 ; i < emails.length; i++) {
for (var j = 0; j < emails[i].length; j++) {
var anexos = emails[i][j].getAttachments();
for (var k = 0; k < anexos.length; k++) {
var tam = tam + anexos[k].getSize();
}
}
var msginicial = conversas[i].getMessages()[0];
if (tam > 0) {
val = [i, msginicial.getSubject(), tam];
planRange = plan.getRange('A1:C1');
planRange.setValue(val);
// doc.getBody().appendParagraph('A conversa "' + msginicial.getSubject() + '" possui ' + tam + 'bytes em anexos.');
}
var tamfinal = tamfinal + tam;
var tam = 0;
}
}
}
listaAnexos();
It works, but with 2 problems:
1) It writes the three val values at A1, B1 and C1. But I want to write i in A1, msginicial.getSubject() in B1 and tam in C1.
2) How can I change the range interactively? Write the first email in A1:C1, the second in A2:C2 ...
I know that are 2 very basic questions, but didn't found on google :(

Problem 1: Make sure you use the right method for the range. You've used Range.setValue() which accepts a value as input, and modifies the content of the range using that one value. You should have used Range.setValues(), which expects an array and modifies a range of the same dimensions as the array. (The array must be a two-dimensional array, even if you're only touching one row.)
val = [[i, msginicial.getSubject(), tam]];
planRange = plan.getRange('A1:C1');
planRange.setValues(val);
Problem 2: (I assume you mean 'programmatically' or 'automatically', not 'interactively'.) You can either use row and column numbers in a loop say, with getRange(row, column, numRows, numColumns), or build the range string using javascript string methods.