I have an element defined with currency and price attributes. When I set the currency attribute to British pound, I want to calculate price accordingly. I tried hooking the attrChanged method but the the if condition never logs true
currencyChanged: function (attrName, oldVal, newVal) {
var actualPrice = this.getAttribute("usdprice");
actualPrice = parseInt(actualPrice);
var converter = 1;
if(newVal === "£") {
converter = 0.59;
console.log("true");
}
this.$.price.innerHTML = actualPrice*converter;
}
I change the currency using the below command
var a = document.querySelector("gmselect-element");
a.setAttribute("currency", "£");
When you use published property *Changed watchers like currencyChanged the arguments are (oldVal, newVal). It's only when you create a generic attributeChanged lifecycle method that you get (attrName, oldVal, newVal). Try this:
currencyChanged: function (oldVal, newVal) {
var actualPrice = this.getAttribute("usdprice");
actualPrice = parseInt(actualPrice);
var converter = 1;
if(newVal === "£") {
converter = 0.59;
console.log("true");
}
this.$.price.innerHTML = actualPrice*converter;
}
Open the Dev Tools console on this simplified jsbin to see it working.
Related
I have 2 'time' inputs for a start and end time.
When both inputs are completed I am wanting the 'total' field to automatically show the total between start and end (e.g 8 hours)
<input type='time' value="09:00" id="MondayStart" name='MondayStart' class='form-control'>
<input type='time' value="17:00" name='MondayEnd' id="MondayEnd" class='form-control'>
<input type="text" name="total">
I have tried following this script (http://jsbin.com/emoziw/1/edit?html,js,output) but cannot seem to change it to time
You have a default value so this is good.
You need to do something like this (using jQuery) :
$(".form-control").on('change', ()=>{
var $this = $(this);
var sum;
sum = /*do the sum calculation here*/;
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
});
This will, when the change event is triggered on any element having the form-control class, update the sum automatically.
PS:
I suggest to put a default value on the sum's holder (being of course the sume of the default values)
EDIT
I'd like to help you with the time calculation, so I made functions :
function doCalc($jq){//pass in the jqSelection that gets the two input
var $beg = $jq.eq(0);//first element with this class
var $end = $jq.eq(1);//second element with this class
var beg_t = {
h: getH($beg),
m: getM($beg)
}
var end_t = {
h: getH($end),
m: getM($end)
}
var elapsed = {
h: end_t.h - beg_t.h,
m: end_t.m - beg_t.m
}
return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}
/
function getH($t){
var str = $t.val();
return str.replace(/(\d{2}):(\d{2})/,"$1");
}
function getM($t){
var str = $t.val();
return str.replace(/(\d{2}:(\d{2})/,"$2");
}
EDIT 2:
If you want you can pass to the onchange EH a function pointer (therefore you can also call the function without having to trigger the event) :
function updateSum(){
var $this = $(".form-control");
var sum;
sum = doCalc($this);
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
}
therefore you can have :
$(document).ready(()=>{
updateSum();
$(".form-control").on('change', updateSum);
});
EDIT 3:
()=>{/*...*/} is just the ES6 way to declare an anonymous function, you can replace them with function(){/*...*/} if you're more comfortable with it.
EDIT 4 aka RECAP :
If you're a bit lost after this answer, here's a recap of the functions you need to add to your website :
##Regex based input processing##
function getH($t){
var str = $t.val();
return str.replace(/(\d{2}):(\d{2})/,"$1");
}
function getM($t){
var str = $t.val();
return str.replace(/(\d{2}:(\d{2})/,"$2");
}
##Calculation##
function doCalc($jq){//pass in the jqSelection that gets the two input
var $beg = $jq.eq(0);//first element with this class
var $end = $jq.eq(1);//second element with this class
var beg_t = {
h: getH($beg),
m: getM($beg)
}
var end_t = {
h: getH($end),
m: getM($end)
}
var elapsed = {
h: end_t.h - beg_t.h,
m: end_t.m - beg_t.m
}
return ""+elapsed.h+":"+elapsed.m;//so it can be used with what's above
}
##Update function##
function updateSum(){
var $this = $(".form-control");
var sum;
sum = doCalc($this);
$('input[name="total"]').eq(0).val(sum);
//if you put an id to the total then you can just use $(id here).val(sum)
}
##Event Handling and Call##
$(document).ready(function(){
updateSum();
$(".form-control").on('change', updateSum);
});
I'm using Kettle PDI 6.0 running on Windows Server 2012. I need to use the Modified Java Script Value to handle on Json object. I try something like this:
var jsondata = JSON.parse(result);
And get that:
"TypeError: Cannot find function parse in object test value test value test value test value test value test value test value test value test value test value. (script#3)"
I already try to looking for a solution on google, but not looks like that. I think that can be something wrong with my installation.
Note: I already try to use the command:
import java.util.*;
But that command is not recognized (Is not marked in bold).
I get:
missing ; before statement (script#2)
Maybe the Java functions not available.
I made my own function to resolve the problem. I will post here to help who has the same problem. If anyone want to help to solve the initial problem, I am still interested.
You can paste the code bellow on your "Modified Java Script Value" step after receive the Json response from service or get that on file. Note that you need to change the name of variables that you want to find on Json.
Result field is a Json Value.
//Script here
function findInArray(myValue, myArray){
var myResult='';
if(myArray.indexOf(myValue) > -1){
myResult = true;
} else {
myResult = false;
}
return myResult;
}
function getAttributeValue(Atribute, Object)
{
start = indexOf(Object,Atribute);
for (i= start; i < Object.length; i++)
{
if (substr(Object,i,1) == ":")
{
start_value = i+1;
break;
}
}
for (i= start_value; i < Object.length; i++)
{
end_value = i;
if (substr(Object,i,1) == ",")
{
break;
}
}
AttributeValue = replace(substr(Object, start_value, end_value-start_value),'"','');
if (indexOf(AttributeValue, "null") >= 0)
{
AttributeValue = null;
}
return AttributeValue ;
}
// Recupera Status
if (findInArray("status",result))
{
var status = getAttributeValue("status", result);
}
else
{
var status = "";
}
// Recupera _ID
if (findInArray("_id",result))
{
var mandrill_id = getAttributeValue("_id", result);
}
else
{
var mandrill_id = "";
}
// Recupera reject_reason
if (findInArray("reject_reason",result))
{
var reject_reason = replace(getAttributeValue("reject_reason", result),"}","");
}
else
{
var reject_reason = "";
}
yes, the parse json function is not available on the ex4 ecmascript of js rhino engine build in kettle, but you can handle json in kettle using eval.
var resultObj = eval('('+result+')');
//now you can iterate the foo elements of result original json
for(i=0;i< resultObj.length;i++){
Alert('foo number ' + i ' value = ' + resultObj[i].foo);
}
This is not javascript for the browser so eval is perfectly safe.
I'm working in XML and I'd like to provide autocomplete suggestions for the attributes for specific node types using AS3.
For example, if the user is has a cursor in the following node:
<s:Button label="Hello World"/>
I'd like autocomplete to show "width, height, x, y".
I'm trying to get the node name and namespace and then give the editor a list of attributes that should appear in autocomplete.
I found similar questions but those are using a service call and a few that are out dated. I may delete this question if it is a duplicate.
Ace Editor for AS3 here.
In my case, for AS3, it is a combination of items:
ace.setCompleters(null); // I'm removing existing autocomplete
ace.addCompleter(codeCompleter); // adding my own
public var autoCompleteErrorMessage:String = "Nothing available";
public function codeCompleter(editor:Object, session:Object, position:Object, prefix:String, callback:Function):void {
var row:int = position.row;
var column:int = position.column;
/*
if (prefix.length === 0) {
callback(null, []);
return;
}
*/
//var myList:Array = {value: "message", caption: "Caption to user", meta: "Type shown", score: "I don't know"};
var testing:Boolean = false;
if (testing) {
callback(autoCompleteErrorMessage, [{value:"addedToStage"},{value:"added"},{value:"adding"}]);
}
else {
callback(autoCompleteErrorMessage, attributes);
}
}
protected function cursorChangeHandler(event:Event):void {
var qname:QName = getQNameFromCursorPosition(ace.row, ace.column);
if (qname==null) {
if (attributes.length) {
attributes = [];
}
return;
}
if (qname) {
attributes = getSuggestionListFromObject(classObject);
autoCompleteErrorMessage = null;
lastSelectedQName = qname;
}
}
public static var XML_TAG_NAME:String = "meta.tag.tag-name.xml";
public static var XML_TAG_OPEN:String = "meta.tag.punctuation.tag-open.xml";
public static var XML_TAG_CLOSE:String = "meta.tag.punctuation.tag-close.xml";
public static var XML_ATTRIBUTE_NAME:String = "entity.other.attribute-name.xml";
public function getQNameFromCursorPosition(row:int, column:int):QName {
var token:Object;
var line:String;
var type:String;
var value:String;
var found:Boolean;
var qname:QName;
for (; row > -1; row--) {
line = ace.getLine(row);
column = line.length;
for (; column>-1; column--) {
token = ace.getTokenAt(row, column);
type = token ? token.type : "";
if (type==XML_TAG_NAME) {
value = token.value;
found = true;
}
}
if (found) break;
}
if (found) {
qname = new QName("", value);
}
return qname;
}
The getQNameFromCursorPosition() method is fragile and I'm looking into a new method using the jumpToMatching() method.
I want to bind my ng-model with JSON object nested key where my key is in a variable.
var data = {"course":{"sections":{"chapter_index":5}}};
var key = "course['sections']['chapter_index']"
Here I want to get value 5 from data JSON object.
I found the solution to convert "course.sections.chapter_index" to array notation like course['sections']['chapter_index'] this. but don't know how to extract value from data now
<script type="text/javascript">
var BRACKET_REGEXP = /^(.*)((?:\s*\[\s*\d+\s*\]\s*)|(?:\s*\[\s*"(?:[^"\\]|\\.)*"\s*\]\s*)|(?:\s*\[\s*'(?:[^'\\]|\\.)*'\s*\]\s*))(.*)$/;
var APOS_REGEXP = /'/g;
var DOT_REGEXP = /\./g;
var FUNC_REGEXP = /(\([^)]*\))?$/;
var preEval = function (path) {
var m = BRACKET_REGEXP.exec(path);
if (m) {
return (m[1] ? preEval(m[1]) : m[1]) + m[2] + (m[3] ? preEval(m[3]) : m[3]);
} else {
path = path.replace(APOS_REGEXP, '\\\'');
var parts = path.split(DOT_REGEXP);
var preparsed = [parts.shift()]; // first item must be var notation, thus skip
angular.forEach(parts, function (part) {
preparsed.push(part.replace(FUNC_REGEXP, '\']$1'));
});
return preparsed.join('[\'');
}
};
var data = {"course":{"sections":{"chapter_index":5}}};
var obj = preEval('course.sections.chapter_index');
console.log(obj);
</script>
Hope this also help others. I am near to close the solution,but don't know how can I get nested value from JSON.
This may be a good solution too
getDeepnestedValue(object: any, keys: string[]) {
keys.forEach((key: string) => {
object = object[key];
});
return object;
}
var jsonObject = {"address": {"line": {"line1": "","line2": ""}}};
var modelName = "address.line.line1";
var result = getDescendantPropValue(jsonObject, modelName);
function getDescendantPropValue(obj, modelName) {
console.log("modelName " + modelName);
var arr = modelName.split(".");
var val = obj;
for (var i = 0; i < arr.length; i++) {
val = val[arr[i]];
}
console.log("Val values final : " + JSON.stringify(val));
return val;
}
You are trying to combine 'dot notation' and 'bracket notation' to access properties in an object, which is generally not a good idea.
Source: "The Secret Life of Objects"
Here is an alternative.
var stringInput = 'course.sections.chapter_index'
var splitInput = stringInput.split(".")
data[splitInput[1]]][splitInput[2]][splitInput[3]] //5
//OR: Note that if you can construct the right string, you can also do this:
eval("data[splitInput[1]]][splitInput[2]][splitInput[3]]")
Essentially, if you use eval on a string, it'll evaluate a statement.
Now you just need to create the right string! You could use the above method, or tweak your current implementation and simply go
eval("data.course.sections.chapter_index") //5
Source MDN Eval docs.
var data = {
"course": {
"sections": {
"chapter_index": 5
}
}
};
var key = "course['sections']['chapter_index']";
var keys = key.replace(/'|]/g, '').split('[');
for (var i = 0; i < keys.length; i++) {
data = data[keys[i]];
}
console.log(data);
The simplest possible solution that will do what you want:
var data = {"course":{"sections":{"chapter_index":5}}};
var key = "course['sections']['chapter_index']";
with (data) {
var value = eval(key);
}
console.log(value);
//=> 5
Note that you should make sure key comes from a trusted source since it is eval'd.
Using with or eval is considered dangerous, and for a good reason, but this may be one of a few its legitimate use cases.
If you don't want to use eval you can do a one liner reduce:
var data = {"course":{"sections":{"chapter_index":5}}};
var key = "course['sections']['chapter_index']"
key.split(/"|'|\]|\.|\[/).reduce((s,c)=>c===""?s:s&&s[c], data)
I have two textbox(goalText and goalText1) and a button(goalreach) in my html.
My aim : When I enter numeric value in 1 textbox(goalText), it should be converted to json and be stored. So even after 5 days when I run the application, it should be stored. Now when I enter the numeric value, in other textbox(goalText1) and it matches, I am simply displaying the message match. This is the demo, I am trying so that I can know that value can be stored in json and can be retrieved when necessary. I have written the code as follow:
$("#goalreach").click(function () {
var contact = new Object();
contact.goalDist = "$("#goalText.value ").val()";
var jsonText = JSON.stringify(contact);
if (jsonText == ($("#goalText1.value").val())) {
document.getElementById('divid').innerHTML = 'Match';
}
});
I know, I have made many simple mistakes of brackets and " too, but I am a newbie, If you can help me out.
First, you have to compare either 2 objects or 2 strings, and in goalDist, you should store the value (BTW, you get the jQuery object with $("#goalText") and the value with somejQueryObject.val() moreover this is generally equivalent to document.getElementById("goalText").value)...
This can be done like this :
$("#goalreach").click(function () {
// Create an object with the single property "goalDist"
var contact = { goalDist : $("#goalText").val() };
// Makes it be a string (it will in this simple example : `"{"goalDist":<the value of goalTest>}"`
var jsonText = JSON.stringify(contact);
// Creates a string from an equivalent object bound on the second field
var jsonText2 = JSON.stringify({ goalDist : $("#goalText2").val() });
// Compares the 2 strings
if (jsonText === jsonText2) {
document.getElementById('divid').innerHTML = 'Match';
}
});
TRY THIS
$("#goalreach").click(function () {
var contact = new Object();
var goalDist = '$("#goalText.value").val()';
var jsonText = JSON.stringify(contact.goalDist);
if(jsonText==($("#goalText1.value").val()))
{
document.getElementById('divid').innerHTML = 'Match';
}
});
Try the following code:
$("#goalreach").click(function () {
var contact = new Object();
contact.goalDist = $("#goalText").val();
var jsonText = JSON.stringify(contact);
if (jsonText == ($("#goalText1").val())) {
document.getElementById('divid').innerHTML = 'Match';
}
});
OR
$("#goalreach").click(function () {
var goalText = $("#goalText").val();
var goalText1 = $("#goalText1").val();
if (goalText == goalText1) {
document.getElementById('divid').innerHTML = 'Match';
}
});