Using Substring in javascript to collect values in a array - javascript

I have data in a single field which is as below:
40-818-938 | COUPLING, 25MM, PVC BLACK | PCS, MTR, BUNDLE | 3
The first block is the item code, second is the item description, third are the units, they are dynamic, and fourth is the number of units. The blocks are separated by |
I want to loop through the third block (units) and put them into separate variables without commas and spaces and use them to populate a select list.
Kindly help me in achieving that. Below is the code which adds the third block into a select list according to the number of units (fourth block), I need to separate them.
for (var i = 0; i < arrData[3]; i++) {
var x = document.createElement("OPTION");
x.setAttribute("value", arrData[2]);
var t = document.createTextNode(arrData[2]);
x.appendChild(t);
input.appendChild(x);
}
Thanks in advance.

Since you've already split the original string into an array, you just need to also split the 2nd element of that array:
arrData[2] = arrData[2].split(',');
Then, inside the loop, you need to reference it like so:
x.setAttribute("value", arrData[2][i]);
var t = document.createTextNode(arrData[2][i]);
Demo

Var items = obj.split("|");
Var units = items[2].split(",");

If you want to remove the spaces as well, you can add them to the pattern to split on:
var data = '40-818-938 | COUPLING, 25MM, PVC BLACK | PCS, MTR, BUNDLE | 3';
var units = data.split(/\s*\|\s*/g)[2]; // "PCS, MTR, BUNDLE"
console.log(units.split(/\s*,\s*/)[1]); // "MTR"
and the simplest way to make an option element is to use the Option constructor:
var unit = units.split(/\s*,\s*/)[1];
var x = new Option(unit, unit);
input.appendChild(x);

You need to use split function of java script. Ex.
var newstring=string.split('|');
var laststring=newstring[2].split(",");// new string
var yourneed=laststring[1];

you can do it this way
var string1 = yourstring.split('|');
var array = string1[2] .split(',');
Build a select:
array.forEach(function(entry) {
var x = document.createElement("OPTION");
x.setAttribute("value", entry);
var t = document.createTextNode(entry);
x.appendChild(t);
input.appendChild(x);
});

Related

How to avoid long for-loops for creating multiple arrays (javascript)

I´m stuck with a problem... given an input number I´m trying to output a string of length 4. The string has to be divided into 2 parameter sections "On"/"Off".
For example:
-If the input number is 16, then the string should get combined as follows:
"On" section = "On" * Math.floor(16/5) = 3 --> "On On On".
"Off" section should be: length-On-section = 4-3 = 1 --> "Off".
Hence the string should look like "On On On Off".
I´m currently trying to narrow my solution to a nicer approach than using a for loop. I have to repeat this process various times in my function to create strings following the same approach but in various lengths and "On"/"Off" section ratios. but I´m not sure how to set it up properly..
this is one example:
function hoursTop(hour) {
var lights = [], on = Math.floor(hour/5), off = 4 - topLightsOn;
for(var i=1; i<=on; i++){
lights.push('On');
}
for(var j=1; j<=Off; j++){
lights.push('Off');
}
return lights.join("");
}
This produces way too much code overall.. Thanks for helping me out!
You can use String#repeat to create the strings, then concat them, and trim the extra spaces:
function hoursTop(hour) {
var on = Math.floor(hour/5), off = 4 - on;
return 'on '.repeat(on) + 'off '.repeat(off).trim();
}
console.log(hoursTop(16));
Or you can use Array#fill to create the array, then concat them, and join the array to a string:
function hoursTop(hour) {
var on = Math.floor(hour/5), off = 4 - on;
return Array(on).fill('on').concat(Array(off).fill('off')).join(' ');
}
console.log(hoursTop(16));

Add Javascript to replace Span tags

I have an online store that has limited access to make any correct edits to code.
I am trying to implement proper Price Schema as they have:
<span itemprop="price">$57.00</span>
This is incorrect.
It needs to be set up like this
<span itemprop="priceCurrency" content="USD">$</span>
<span itemprop="price">57.00</span>
Is there something in JavaScript or jQuery that can manipulate this by separating the Currency Symbol and Price?
Thanks
You get the ELEMENT text:
var value = $("span[itemprop='price'").text();
Then you could generate the html using regex like:
var html = '$57.00'.replace(/([^\d])(\d+)/,
function(all, group1, group2){
return 'some html here =' + group1 + '= more hear =' + group2 });
Might not be 100% bug-free, but it should get you started:
<script type="text/javascript">
var n = document.getElementsByTagName('*')
for(var i=0;i<n.length;i++)
{
if(n[i].hasAttribute('itemprop')) //get elements with itemprop attribute
{
var p = n[i].parentNode
var ih = n[i].innerHTML //grab the innerHTML
var num = parseFloat(ih) //get numeric part of the innerHTML - effectively strips out the $-sign
n[i].innerHTML = num
//create new span & insert it before the old one
var new_span = document.createElement('span')
new_span.innerHTML = '$'
new_span.setAttribute('itemprop', 'priceCurrency')
new_span.setAttribute('currency', 'USD')
p.insertBefore(new_span, n[i])
}
}
</script>
Somthing along the lines of
// find all span's with itemprop price
document.querySelectorAll("span[itemprop='price']").forEach(function(sp){
// grab currency (first char)
var currency = sp.innerText.substr(0,1);
// remove first char from price val
sp.innerText = sp.innerText.substr(1);
// create new element (our price-currency span)
var currencySpan = document.createElement("span");
currencySpan.innerText = currency;
currencySpan.setAttribute("itemprop", "priceCurrency");
currencySpan.setAttribute("content", "USD");
// Append it before the old price span
sp.parentNode.insertBefore(currencySpan, sp);
});
Should do what your after.
See demo at: https://jsfiddle.net/dfufq40p/1/ (updated to make effect more obvious)
This should work -- querySelectorAll should be a bit faster, and the regex will work with more than just USD, I believe.
function fixItemPropSpan() {
var n = document.querySelectorAll('[itemprop]');
for (var i = 0; i < n.length; i++) {
var p = n[i].parentNode;
var ih = n[i].innerHTML;
var num = Number(ih.replace(/[^0-9\.]+/g, ""));
n[i].innerHTML = num;
//create new span & insert it before the old one
var new_span = document.createElement('span');
new_span.innerHTML = '$';
new_span.setAttribute('itemprop', 'priceCurrency');
new_span.setAttribute('currency', 'USD');
p.insertBefore(new_span, n[i]);
}
}
Here is a suggestion of how you can make this work, though i would not suggest doing it like this (too many cases for content="").
Example of the logic you could use to transform the incorrect format to the correct one.
Hope you find it useful. :]

File path in javascript

This is my first question on stack overflow.
I need to create a path for images and path should be like this pages/assets/images/Topic02/T02P08/L1T2_P8_2a_Normal.png . So I am breaking this string into 2 parts.
1st
var dummyUrl1= "pages/assets/images/Topic02/T02P08/L1T2_P8_2";
2nd
var dummyUrl2="_Normal.png";
I just need to change 2a with 2b,2c,2d etc according to my need. So I stored these letters into an array. And picking them. And then I am making a new string string in this manner,
var currentImgUrl= dummyUrl1+arr[imageId]+dummyUrl2;
where arr=['a','b','c','d','e']
So value of currentImgUrl should be like this,
"pages/assets/images/Topic02/T02P08/L1T2_P8_2b_Normal.png" but I am getting value in this manner ,
"http://192.168.86.91/Tarun/AXON/DfMAWorking/pages/assets/images/Topic02/T02P08/L1T2_P8_2a_Normal.png"
I tried this code:
$(".clickme,.innerText").mouseenter(function(){
var arr = ['a','b','c','d','e'];
var dummyUrl1= "pages/assets/images/Topic02/T02P08/L1T2_P8_2";
var dummyUrl2="_Normal.png";
var getImageId = $(this).attr("id");
var imageId= getImageId.substring(3,4);
var currentImgUrl= dummyUrl1+arr[imageId]+dummyUrl2;
console.log("Current Image should be : "+currentImgUrl);
});
Your URL is relative, if you want http://192.168.86.91/pages/assets/...Normal.png", add a / at the beginning of dummyUrl1 dummyUrl1= "/pages/assets/images/Topic02/T02P08/L1T2_P8_2";

Locating MAX Number in a string for a list of records

I am relatively new to JavaScript and trying to get the following achievement.
Lets say we have the following data records.
Example data records:
A_ID_R1_V1
A_ID_R1_V2
A_ID_R2_V1
Basically I am looking for two results:
1.Create a string based on record A_ID_R1_V2.
Input = A_ID_R1_V2
Output = A_ID_R1_V3
My thoughts about this is so locate the MAX V<#> for A_ID_R1_ and then add 1.
2.Create a string based on record A_ID_R2_V1.
Input = A_ID_R2_V1
Output = A_ID_R3_V1
My thoughts about this is so locate the MAX R<#> for all records and then add 1.
Thanks a lot in advance!!!!!!!!
I have strong feeling that this is some kind of school homework...
Anyhow, this will do the job, but its not sophisticated nor very effective
function updateId(letter){
var pos = (letter === 'V')?3:2;
var parts = id.split('_');
var num = parseInt(parts[pos].substring(1,parts[pos].length));
parts[pos] = letter+(num+1);
id = parts.join('_');
logVal(id);
}
try this with regex: http://jsfiddle.net/mig1098/wh6n2oqL/
newEntry = function(entry){
var str2 = entry.replace(/\d+$/,'');
var num = parseInt(entry.replace(/A_ID_R(\d+)_V/,''));
num = num+1;
return str2+num;
}

Transposing music using javascript or jquery

I have a chord chart application that I wrote and I would like to allow users to transpose the key of the chart using an onClick handler.
My chart looks like this
{C}My name is Blanket, {F}And I can run fast
The chords inside the brackets appear above the letter it preceeds.
I would like to use javascript or jquery in order to do this. How would I go about creating this transpose button? Any help is appreciated. Thank you in advance.
EDIT
So here's what I came up with...
$('.transposeUp').click(function(){
$('.chord').each(function(){
var currentChord = $(this).text(); // gathers the chord being used
if(currentChord == $(this).text()){
var chord = $(this).text().replace("F#", "G")
}
//... the if statements continue though every chord
//but I didn't place them here to save space
});
});
So here is the problem...
I have a slash chord in the mix (G/B), It changes the be on transpose but because it changes the "B" the chord is now (G/C) which is not the same as the "currentChord" so it doesn't change the G when it gets to its respective if condition. Until I have transposed enough where the Chord is eventualy (G/G) then the first "G" starts transposing leaving the last "G" the same. Any ideas? Again your knowledge and help is greatly appreciated. Thanks in advance.
You need to match the chords sequentially so that you can update them one at a time. If you try to match everything at once you'll run into problems like you described, because you keep matching the same chord over and over again.
A good way to accomplish this would be with regular expressions to parse and split the chord. Once you have the matching chord values, use an array of chords to find the next/previous chord to transpose. Here is some sample code I have developed as a demo:
<p><span class="chord">{C}</span>My name is Blanket,</p>
<p><span class="chord">{G / B}</span>And I can run fast</p>
<p>
<input id="transposeDown" type="button" value="Down" /> |
<input id="transposeUp" type="button" value="Up" />
</p>
var match;
var chords =
['C','C#','D','Eb','E','F','F#','G','Ab','A','Bb','B','C',
'Db','D','D#','E','F','Gb','G','G#','A','A#','C'];
var chordRegex = /C#|D#|F#|G#|A#|Db|Eb|Gb|Ab|Bb|C|D|E|F|G|A|B/g;
$('#transposeUp').click(function() {
$('.chord').each(function() {
var currentChord = $(this).text();
var output = "";
var parts = currentChord.split(chordRegex);
var index = 0;
while (match = chordRegex.exec(currentChord))
{
var chordIndex = chords.indexOf(match[0]);
output += parts[index++] + chords[chordIndex+1];
}
output += parts[index];
$(this).text(output);
});
});
$('#transposeDown').click(function() {
$('.chord').each(function() {
var currentChord = $(this).text();
var output = "";
var parts = currentChord.split(chordRegex);
var index = 0;
while (match = chordRegex.exec(currentChord))
{
var chordIndex = chords.indexOf(match[0],1);
output += parts[index++] + chords[chordIndex-1];
}
output += parts[index];
$(this).text(output);
});
});
Sample demo: http://jsfiddle.net/4kYQZ/2/
A couple of things to notice:
I took #gregp's idea of having multiple copies of the key list so that I can handle both sharps and flats. The first scale includes the preferred #/b which will be used during transposing. The second scale includes the other formats so that if the music includes them, they will transpose correctly. For instance, since Eb is in the first scale, it will be used instead of D# as you are transposing up and down; however, if there is a D# in the music to begin with, it will correctly move to D/E (with the caveat that if you move back, it will become an Eb again). Feel free to modify the preferred scale - I used my educated judgment based on personal music experience.
The regular expression has to have the sharped/flatted keys first, otherwise a C# would be just as easily matched as a C when that's not correct.
I have C at the beginning and the end of the array so that I can start at any location and move both directions without passing the end of the array. In order for this to work, the transposeDown code has an extra parameter in the call to chords.indexOf to start at position 1 so it matches the last C in the array instead of the first C. Then when it attempts to move to the previous element, it doesn't pass the beginning of the array.
I'm splitting the chord as well using the regular expression, which is redundant, but it makes it super-easy to recompose the final string back together - by interleaving the original string parts with the updated chord keys (don't forget the last piece at the end!).
I'm using elements instead of classes for your buttons.
Hope this helps!
Update 1: Per comment by OP, the use of indexOf on arrays is not supported by pre-ie9. This can be solved by using a helper function that does the same thing:
function arrayIndexOf(arr, match)
{
for (var i = 0; i < arr.length; i++)
if (arr[i] == match)
return i;
return -1;
}
And this line
var chordIndex = chords.indexOf(match[0]);
would be replaced with:
var chordIndex = arrayIndexOf(chords, match[0]);
See updated sample demo: http://jsfiddle.net/4kYQZ/11/
Using jQuery, you're spoiled for choice for binding click handlers. There's .click(), .delegate(), .live(), and many others. It wouldn't make sense to reproduce what the APIs already tell you, but I can say this: learning how to bind the click is the smallest part of the overall problem, and even capturing the chord name with .text() is going to be trivial once you've had a look at the jQuery API.
The tricky part is going to be the logic of transposing itself. You'll need to take the knowledge you already have (for example, going from E to F is only a half-step; there's no E# or Fb) and make it work as code.
My apologies for general advice rather than code samples, but my advice is to have two arrays, one containing all the chords in terms of sharps, one with all the chords in terms of flats.
You could do a bit of cheating, too: instead of logic to wrap around to the beginning (say, C in position 0), just have your arrays duplicated:
["C","C#","D","D#","E","F","F#","G","G#","A","B","C","C#","D","D#","E","F","F#","G","G#","A","B"]
Then find the first occurence of the chord name, move ahead the desired number of stops, and you'll still have the right string.
Call function transpose for up:
text = transpose(text, 1);
Call function transpose for down:
text = transpose(text, -1);
Function:
function transpose(text, amount){
var lines = new Array();
var chord = new Array();
var scale = ["C","Cb","C#","D","Db","D#","E","Eb","E#","F","Fb","F#","G","Gb","G#",
"A","Ab","A#","B","Bb","B#"];
var transp = ["Cb","C","C#","Bb","Cb","C","C","C#","D","Db","D","D#","C","Db","D",
"D","D#","E","Eb","E","F","D","Eb","E","E","E#","F#","E","F","F#",
"Eb","Fb","F","F","F#","G","Gb","G","G#","F","Gb","G","G","G#","A",
"Ab","A","A#", "G","Ab","A","A","A#","B","Bb","B","C","A","Bb","B",
"B","B#","C#"];
var inter = '';
var mat = '';
lines = text.split("\n");
for(var i in lines){
if(i%2===0){
chord = lines[i].split(" ");
for(var x in chord){
if(chord[x]!==""){
inter = chord[x];
var subst = inter.match(/[^b#][#b]?/g);
for(var ax in subst){
if(scale.indexOf(subst[ax])!==-1){
if(amount>0){
for(ix=0;ix<amount;ix++){
var pos = scale.indexOf(subst[ax]);
var transpos = 3*pos-2+3;
subst[ax] = transp[transpos+1];
}
}
if(amount<0){
for(ix=0;ix>amount;ix--){
var pos = scale.indexOf(subst[ax]);
var transpos = 3*pos-2+3;
subst[ax] = transp[transpos-1];
}
}
}
}
chord[x]=subst.join("");
}
}
lines[i] = chord.join(" ");
}
}
return lines.join("\n");
}
The first line is transpose and the second does not, and sequentially.

Categories