I've got this:
function generate() {
var color = $("#color option:selected").map(function(){return this.value}).get().join('-');
var size = $("#size option:selected").map(function(){return this.value}).get().join('-');
// Final URL
var result = 'https://weneve.com/en/59-wall-concrete-tiles?q=';
color ? result += 'Color-'+color : null;
size ? result += 'Size-'+size : null;
window.open(result,'_blank');
}
But in the FINAL URL if someone chooses Value=Color and Value=Size the values are next to each other without any space. How can I separate them with a comma?
Editing answer as recommended... As other follow-on answers have commented, we generally use array.join to handle this kind of stuff. But if you are only ever going to have 2 parameters (color and size) then you could just add the comma if both color and size were selected by the user. The code below just adds one additional statement using the same ternary operator format you used for color and size options with the exception that the condition check is for both (color && size). If both evaluate to true, then add the comma to the result string.
// Final URL
var result = 'https://weneve.com/en/59-wall-concrete-tiles?q=';
color ? result += 'Color-'+color : null;
(color && size) ? result += ',' : null;
size ? result += 'Size-'+size : null;
Instead of concat immediately you can keep you query params in array. Than - concat it with join method.
var queryParams = [];
if(color) queryParams.push('Color-' + color);
if(size) queryParams.push('Size-' + size);
var queryParamsString = queryParams.join(',');
var url = 'https://weneve.com/en/59-wall-concrete-tiles';
var finalUrl = queryParamsString ? url + '?q=' + queryParamsString : url;
But if I were you I would have a look to the URL type https://developer.mozilla.org/en-US/docs/Web/API/URL to construct more understandable and elegant code.
Think about it this way: when working with a list of things where you don't yet know the final length, put those things in an Array. When you're ready to display text that depends on the things that are in that array, then convert the array to a String, with your desired character(s) between the things.
You're already using .join() earlier in your code. You'll use that to add commas in your last step.
function generate() {
// create empty array
var queryParams = [];
var color = $("#color option:selected").map(function(){
return this.value
}).get().join('-');
if (color) {
queryParams.push(color);
}
var size = $("#size option:selected").map(function(){
return this.value
}).get().join('-');
if (size) {
queryParams.push(size);
}
// Final URL
var urlOptions = queryParams.join(',');
var result = `https://weneve.com/en/59-wall-concrete-tiles?q=${params}`;
window.open(result,'_blank');
}
Related
I have a url with an array in it as parameter. For example:
test.dev/orders?filter[]=temp&filter[]=placed
I want to create a js function that can toggle the contents of the array and redirects after the modification.
For example, if i call a function toggleFilter('temp') i want the js to redirect to test.dev/orders?filter[]=placed.
But if i call toggleFilter('processed') i want to have the js redirect to test.dev/orders?filter[]=temp&filter[]=placed&filter[]=processed.
How can i make such function? Thanks in advance!
The function needs to get the current query string, break it down, and then based on the parameters, re-assemble it.
document.location.search - gives you the query string easily enough.
String.split - lets you break it down into its parts.
arguments - lets use this instead of defined parameters so you can pass as many (or as few) filters as you like.
From there, its just interpreting the parameters to assemble a new query string...
function toggleFilter() {
var queryString = document.location.search;
queryString = queryString.substring(1); // Get rid of the initial '?'
// Break it into individual parts and remove the 'filter[]=' leaving just the values
var queryStringSplit = queryString.split('&');
var values = [];
for (var qss = 0; qss < queryStringSplit.length; qss++) {
var value = queryStringSplit[qss];
value = value.split('=')[1];
// This will remove any "blank" values (like 'filter[]=&...")
if (value)
values.push(value);
}
// Add / remove values in arguments
for (var a = 0; a < arguments.length; a++) {
var arg = arguments[a];
var index = values.indexOf(arg);
if (index == -1)
values.push(arg);
else
values.splice(index, 1);
}
// Re-assemble the new query string
queryString = ''; // Default to blank
if (values.length)
queryString = 'filter[]=' + values.join('&filter[]=');
// Redirect to new location
location.search = queryString;
}
Having said that, I think that if you want to make this any kind of reusable, I would call it something like toggleQueryString and modify the logic to interpret the first argument as the name of the queryString value to toggle (so you could do things other than "filter[]") and I would not have it set the location, but instead return a query string value that you could do whatever you want with. But this function should do the trick.
function toggleFilter(url, key) {
var result;
if(url.indexOf('filter[]=' + key) > -1)
result = url.replace('filter[]=' + key + '&', '').replace('filter[]=' + key, '');
else
result = url + (url.indexOf('?') > -1 ? '&' : '?') + 'filter[]=' + key;
result = result.indexOf('?') == result.length - 1 ?
result.substring(0, result.length - 1) :
result;
return result;
// or if you want to redirect just write window.location.href = result;
}
www.domain.com/lookbook.html#look0&product1
On page load I would like to grab the whole hash ie. #look0&product1
then split it up and save the number of the look ie 0 in a variable called var look and the number of the product ie 1 in another variable called var product. Not sure how to achieve this.
Is this also the best way of passing and retrieving such parameters? Thanks
Use var myHash = location.hash to get hash part of URL. Than do var params = myHash.split('&') and after that for each part do part.split('=') to get key-value pairs.
Maybe it's better to pass these parameters via GET from PHP side and than post them inside page when page is processed via PHP?
<input type="hidden" name="look" value="<?php echo isset($_GET['look']) ? $_GET['look'] : '';?>"/>
Here's the pure Javascript method:
function parseHash(hash) {
// Remove the first character (i.e. the prepended "#").
hash = hash.substring(1, hash.length);
// This is where we will store our properties and values.
var hashObj = {};
// Split on the delimiter "&" and for each key/val pair...
hash.split('&').forEach(function(q) {
// Get the property by splitting on all numbers and taking the first entry.
var prop = q.split(/\d/)[0];
// Get the numerical value by splitting on all non-numbers and taking the last entry.
var val_raw = q.split(/[^\d]/);
var val = val_raw[val_raw.length - 1]
// If the property and key are defined, add the key/val pair to our final object.
if (typeof prop !== 'undefined' && typeof val !== 'undefined') {
hashObj[prop] = +val;
}
});
return hashObj;
}
Use like:
parseHash(window.location.hash /* #book10&id1483 */)
/* returns: Object {book: 10, id: 1483} */
I suggest using the norm for passing values through the location's hash: prop=value. Ex: #book=10&id=311. Then you can easily split on = for each property.
You can use .match(re) method with use of regular expression to extract the number from the given string.
You can try this:
var hashes = location.hash.split('&'); // get the hash and split it to make array
var values = hashes.map(function(hash){ // use .map to iterate and get a new array
return hash.match(/\d+/)[0]; // returns the numbers from the string.
});
var loc = "look0345345345&product1";
var hashes = loc.split('&');
var values = hashes.map(function(hash){ return hash.match(/\d+/)[0]; });
document.body.innerHTML = '<pre>'+ JSON.stringify(values) + '</pre>';
You could try this:
var url = 'www.domain.com/lookbook.html#look0&product1'
, result = {}
, expr = RegExp(/[#&]([a-zA-z]+)(\d+)/g);
var parts = expr.exec(url);
while(parts != null && parts.length == 3) {
result[parts[1]] = parts[2];
parts = expr.exec(url);
}
var look = result['look']
, product = result['product'];
document.getElementById('result').innerHTML = 'look = ' + look + '<br>' + 'product = ' + product;
<p id='result'></p>
We are basically using a regular expression to divide the parameter name and value into two groups that we can then get by calling expr.exec(url).
Each time we call expr.exec(url), we get the next set of name and value groups.
We set the value of the parameter to its name in the result object.
In the regular expression /[#&]([a-zA-z]+)(\d+)/g, the g after the /.../ means match each time find the two groups.
The two groups are prefaced by either & or # ([#&]). The first group is a String of letters ([a-zA-z]+), the name of the parameter. The second is a String of numbers (\d+), the value you are looking for.
The regex returns the String that matches the pattern as the first result in the parts array, followed by the groups matched, which which means that our two groups in each iteration will be parts[1] and parts[2].
you should use:
function parseHash(hash){
hash = hash.substring(1, hash.length); //remove first character (#)
var obj ={}; //create the output
var qa = hash.split('&'); //split all parameters in an array
for(var i = 0; i < qa.length; i++){
var fra1 = qa[i].split('='); //split every parameter into [parameter, value]
var prop = fra1[0];
var value = fra1[1];
if(/[0-9]/.test(value) && !isNaN(value)){ //check if is a number
value = parseInt(value);
}
obj[prop] = value; //add the parameter to the value
}
return obj;
}
document.querySelector("input.hash").onkeyup = function(){
console.log( parseHash(document.querySelector("input.hash").value));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="hash"/>
<p class="output"></p>
use as
parseHash(location.hash /* #look=0&product=1 );
/returns {look: 0, product: 1}/
I am creating a script which is able to read an environment file. The content can be as following:
var1 = 'test'
var2='test2'
var1= 'test'
var3 = 4
I would like to extract the key and the value, eg.:
var1 = 'test' -> result[0]: var1, result[1]: test
How can i write a function that can test if the line read with readFile is valid and afterwards its key (eg. var1) and value (eg. test)? Is it possible to extract both key and value with regexp without running two regexp functions?
Once you have your line stored, you can do something like this:
// line is the line you are processing, object is where you save your stuff
function processLine(line, object) {
var parts = line.split("=");
if (parts.length<2)
return;
// key is parts[0], value is parts[1]
var key = parts.shift();
// if we have equal signs in our value, they will be preserved
var value = parts.join("=");
// get rid of any trailing or preceding spaces
key = key.trim();
value = value.trim();
// is the value a quoted string?
if ((value.charAt(0)==="'" && value.charAt(value.length-1)==="'") ||
(value.charAt(0)==='"' && value.charAt(value.length-1)==='"'))
value = value.slice(1, value.length-1);
// otherwise we assume it's a number
else
value = parseFloat(value);
// TODO: you can check for other stuff here, such as 'true', 'false' and 'null'
// finally, assign it to your object
object[key] = value;
}
Now you just need to call your function for each line, for instance:
var values = {};
for (var i in lines)
processLine(lines[i], values);
Caveats of this approach are numerous. They are easily fixed with some extra code, but I would recommend using something like JSON for defining your configuration values (if that is what they are). There is native support for JSON parsing in javascript, so you could just use that. Maybe you should reconsider your approach.
You can try the following JS code:
function validate(str)
{
var re = /^(\w+)\s*\=\s*(['"]?)(.*?)\2$/;
if ((m = re.exec(str)) !== null) {
return [m[1], m[3]];
}
}
document.getElementById("res").innerHTML =
"Result [0]: " + validate("var1 = 'test'")[0] + "<br>Result [1]: " + validate("var1 = 'test'")[1];
<div id="res"/>
Read the line.. replace quotes with null
//line = "var1 = 'test'";
line = line.replace(/'/g, "");
Split by delimiter =
var result = line.split("=");
//result is an array containing "var1" and "test"
line = "var1 = 'test'";
line = line.replace(/'/g, "");
var result = line.split("=");
document.write("key => "+result[0].trim());
document.write(": value => "+result[1].trim());
I want to parse the following sort of string into key-value pairs in a Javascript object:
var stringVar = 'PLNC||0|EOR|<br>SUBD|Pines|1|EOR|<br>CITY|Fort Myers|1|EOR|<br>';
Each word of 4 capital letters (PLNC, SUBD, and CITY) is to be a key, while the word(s) in the immediately following pipe are to be the value (the first one, for PLNC, would be undefined, the one for SUBD would be 'Pines', the one for CITY would be 'Fort Myers').
Note that '|EOR|' immediately precedes every key-value pair.
What is the best way of doing this?
I just realised it's technically a csv format with interesting line endings. There are limitations to this in that your variable values cannot contain any | or < br> since they are the tokens which define the structure of the string. You could of course escape them.
var stringVar = 'PLNC||0|EOR|<br>SUBD|Pines|1|EOR|<br>CITY|Fort Myers|1|EOR|<br>';
function decodeString(str, variable_sep, line_endings)
{
var result = [];
var lines = str.split(line_endings);
for (var i=0; i<lines.length; i++) {
var line = lines[i];
var variables = line.split(variable_sep);
if (variables.length > 1) {
result[variables[0]] = variables[1];
}
}
return result;
}
var result = decodeString(stringVar, "|", "<br>");
console.log(result);
If you have underscore (and if you don't, then just try this out by opening up your console on their webpage, because they've got underscore included :)
then play around with it a bit. Here's a start for your journey:
_.compact(stringVar.split(/<br>|EOR|\|/))
Try
function parse(str) {
var str = str.replace(/<br>/gi);
console.log(str);
var arr = str.split('|');
var obj = {};
for (var i=0; i<arr.length; i=i+4) {
var key = arr[i] || '';
var val_1 = arr[i+1] || '';
var val_2 = arr[i+2] || '';
if(key) {
obj[key] = val_1 + ':' + val_2; //or similar
}
}
return obj;
}
DEMO
This will work on the particular data string in the question.
It will also work on other data string of the same general format, but relies on :
<br> being discardable before parsing
every record being a group of 4 string elements delineated by | (pipe)
first element of each record is the key
second and third elements combine to form the value
fourth element is discardable.
I have 3 fields for user input.. say textbox1,textbox2,textbox3. What i need to do is represent them like this if values are not empty:
Albany, New York, USA
The last textbox value shouldnt have a comma after that. I was able to do it with an associative array but the problem is i couldnt find a way to detect if it was the last value and after that the comma need not appear.Here is what i did
var addressObjToFormat= {};
addressObjToFormat.City = $("#companyentry").find("#City").val();
addressObjToFormat.State = $("#companyentry").find("#State").val();
addressObjToFormat.Country = $("#companyentry").find("#Country").val();
var formattedAddress = $Utils.mapInfoMarkerAddressFormatter(addressObjToFormat);
mapInfoMarkerAddressFormatter = function mapInfoMarkerAddressFormatter(arraddressObjToFormat) {
var formattedAddress = '';
for (var key in addressToFormatObj) {
if (addressToFormatObj.hasOwnProperty(key)) {
if (addressToFormatObj[key] != '') {
formattedAddress += addressToFormatObj[key] + ',';
}
}
}
alert(formattedAddress);
}
Above code gives me result as :
Albany, New York, USA,
Mumbai, Maharshtra, India,
What i want is it should be able to check if its the last field incase if a textbox is left empty and place comma accordingly after each value. Or is there a better way to do this?
You can use substring, jsfiddle
formattedAddress = formattedAddress.substring(0, formattedAddress.length-1);
or
you can save all values in an array and use Array.join eg.
var arr = ['item1','item3','item3','item4'];
formattedAddress = arr.join(' ,');
There are multiple ways to do this
After all your processing, you can just trim off the last ',' as using a regex
formattedAddress = formattedAddress.replace (/,$/g, "");
Alternatively, you can just push your strings into an array and then join them all.
var tmp = [];
for (var key in addressToFormatObj) {
if (addressToFormatObj.hasOwnProperty(key)) {
if (addressToFormatObj[key]) { // your condition
tmp.push(addressToFormatObj[key]);
}
}
}
var formattedAddress = tmp.join(',');
var formattedAddress = addressToFormatObj.join(',');
The array function join() uses its first parameter as a glue to put in between array segments.