We Keep Coding

Javascript & knockoutjs: how to refactor the following code to be able to access the properties outside the function

Im struggling to find a way to get the properties Override & Justification available outside of the function. The code is:
self.CasOverridesViewModel = ko.observable(self.CasOverridesViewModel);
var hasOverrides = typeof self.CasOverridesViewModel === typeof(Function);
if (hasOverrides) {
self.setupOverrides = function() {
var extendViewModel = function(obj, extend) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
extend(obj[property]);
}
}
};
extendViewModel(self.CasOverridesViewModel(), function(item) {
item.isOverrideFilledIn = ko.computed( function() {
var result = false;
if (!!item.Override()) {
result = true;
}
return result;
});
if (item) {
item.isJustificationMissing = ko.computed(function() {
var override = item.Override();
var result = false;
if (!!override) {
result = !item.hasAtleastNineWords();
}
return result;
});
item.hasAtleastNineWords = ko.computed(function() {
var justification = item.Justification(),
moreThanNineWords = false;
if (justification != null) {
moreThanNineWords = justification.trim().split(/\s+/).length > 9;
}
return moreThanNineWords;
});
item.isValid = ko.computed(function() {
return (!item.isJustificationMissing());
});
}
});
}();
}
I've tried it by setting up a global variable like:
var item;
or
var obj;
if(hasOverrides) {...
So the thing that gets me the most that im not able to grasp how the connection is made
between the underlying model CasOverridesviewModel. As i assumed that self.CasOverridesViewModel.Override() would be able to fetch the data that is written on the screen.
Another try i did was var override = ko.observable(self.CasOverridesViewModel.Override()), which led to js typeError as you cannot read from an undefined object.
So if anyone is able to give me some guidance on how to get the fields from an input field available outside of this function. It would be deeply appreciated.
If I need to clarify some aspects do not hesitate to ask.
The upmost gratitude!

not sure how far outside you wanted to go with your variable but if you just define your global var at root level but only add to it at the moment your inner variable gets a value, you won't get the error of setting undefined.
var root = {
override: ko.observable()
};
root.override.subscribe((val) => console.log(val));
var ViewModel = function () {
var self = this;
self.override = ko.observable();
self.override.subscribe((val) => root.override(val));
self.load = function () {
self.override(true);
};
self.load();
};
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

jquery return true or false according custom function

I want to bind following code in custom function and return true if field has value and false if field is empty. Validating with only one variable, it was easy. But when validating two array I think it can be possible only custom function. I think code becomes unnecessarily lengthy as well because of lack of custom function. Please guide me.
$(document).on('click', '.subadd', function(){
//I want to bind this code in function
var sid = [];
$('input[name="sid[]"]').each(function(){
if(!$(this).val()){
$(this).addClass('border1red');
return false;
};
if($(this).val()){
$(this).removeClass('border1red');
sid.push(this.value);
}
});
var title = [];
$('input[name="title[]"]').each(function(){
if(!$(this).val()){
$(this).addClass('border1red');
return false;
};
if($(this).val()){
$(this).removeClass('border1red');
title.push(this.value);
}
});
//function
//if function return true
if(sid.length && title.length){
$('table#menutable tr:last').after("<tr>.....</tr>");
};
});

First you can shorten your each loop.
if(!$(this).val()){
$(this).addClass('border1red');
return false;
} else {
$(this).removeClass('border1red');
title.push(this.value);
}
You can also make a function for that, with the selector and the array as parameters.
$.validate = function(selector, array) {
$(selector).each(function(){
if(!$(this).val()){
$(this).addClass('border1red');
return false;
} else {
$(this).removeClass('border1red');
array.push(this.value);
}
}
}
In the end, the main section of the code would look like this:
var sid = [];
var title = [];
$.validate('input[name="sid[]"]', sid);
$.validate('input[name="title[]"]', title);
if(sid.length && title.length){
$('table#menutable tr:last').after("<tr>.....</tr>");
};

call user function in foreach loop

i have understand that i need to change the global scope of this, because in the loop this refers to the window object. But if i try to define a variable in my foreach loop via a function its not working and i dont know why although my functio returns the correct value :(
// simple class for xml import
function io() {
this.vertexes = [];
this.getVertexByID = function(id) {
this.vertexes.forEach(function(entry) {
if (id == entry.id) {
// correct element found, displayed and returned
console.log(entry);
return entry;
}
});
}
this.importXML = function(xmlString) {
cells = this.xmlToJson(xmlString);
var parent = graph.getDefaultParent();
var _this = this;
graph.getModel().beginUpdate();
try {
// addEdges
cells.XMLInstance.Edges.Relation.forEach(function(entry) {
// both will be empty but i dont understand why :(
fromVertex = _this.getVertexByID(entry.fromNode);
toVertex = _this.getVertexByID(entry.toNode);
var e1 = graph.insertEdge(parent, null, '', fromVertex, toVertex);
});
} finally {
graph.getModel().endUpdate();
}
}

Returning a value in a forEach callback has no effect. It certainly is not the return value of the function that the forEach is part of.
So change this:
this.vertexes.forEach(function (entry) {
if(id==entry.id){
//correct element found,displayed and returned
console.log(entry);
return entry;
}
});
to this:
return this.vertexes.find(function (entry) {
return id==entry.id;
});

Can't get array.splice to work in Angular

I have the object words and a checkbox which should hide a specific element from this object, but I cannot get it work.
<body ng-controller="ArrController">
<input type="checkbox" ng-model="hide"> {{kc}}
{{words}}
</body>
The ArrController:
app.controller('ArrController', function ($scope, $http) {
$scope.hide = false;
$http.get('array.json').success(function(data) {
var keyword = 'lol';
$scope.words = data.unsorted_arr;
$scope.$watch('hide', function () {
if ($scope.hide == true) {
var remove = function() {
$scope.words.splice(keyword, 1);
}
$scope.kc = 'hidden';
} else {
$scope.kc = 'not hidden';
$scope.words = data.unsorted_arr;
}
});
});
});
The file array.json contains data for words:
{"unsorted_arr":{"gonna":3,"lol":114,"wouldn":2,"know":6,"lowkey":2,"man":5}}
The kc modifies according to the checkbox status, but the words stays the same.
Where am I wrong?

Splice is for removing something in an array, and it takes in two integers as parameters.
Since you have an object, just use delete:
delete $scope.words[keyword];
By doing, $scope.words = data.unsorted_arr, the two variables refer to the same object so deleting something from $scope.words will delete it from data.unsorted_arr.
Keep a reference to it so you can repopulate it later:
var word = $scope.words[keyword];
...
delete $scope.words[keyword];
...
$scope.words[keyword] = word;

You are confusing Indexed arrays with associative arrays,
Array.splice is a method of Indexed Arrays,
you have a simple Javascript Object (associative array)...
on POJO you can use the delete operator or a simply reassignment to undefined:
var a = { foo: 'baz' };
delete a['foo'];
var b = ['foo', 'baz'];
b.splice(0, 1)

In your example you are defining a function for removing the element, but the function is never being called.
var remove = function() {
$scope.words.splice(keyword, 1);
}
you may need to your logic to remove the function (as it doesn't seem to be needed) and replace the of use splice with the delete statement:
$http.get('array.json').success(function(data) {
var keyword = 'lol';
$scope.words = data.unsorted_arr;
$scope.$watch('hide', function () {
if ($scope.hide == true) {
delete $scope.words[keyword];
$scope.kc = 'hidden';
} else {
$scope.kc = 'not hidden';
$scope.words = data.unsorted_arr;
}
});
});

Resolve function pointer in $(document).ready(function(){}); by json string name

I have a json object retrieved from server in my $(document).ready(...); that has an string that I would like to resolve to a function also defined within $(document).ready(...); so, for example:
$(document).ready(function{
$.getJSON(/*blah*/,function(data){/*more blah*/});
function doAdd(left,right) {
return left+right;
}
function doSub(left,right) {
return left-right;
}
});
with json string:
{"doAdd":{"left":10,"right":20}}
One way I thought about was creating an associative array of the function before loading the json:
var assocArray=...;
assocArray['doAdd'] = doAdd;
assocArray['doSub'] = doSub;
Using eval or window[](); are no good as the function may not be called for some time, basically I want to link/resolve but not execute yet.

Change your JSON to
{method: "doAdd", parameters : {"left":10,"right":20}}
Then do
var method = eval(json.method);
// This doesn't call it. Just gets the pointer
Or (haven't tried this)
var method = this[json.method]

How about something like this?
$(function(){
// Function to be called at later date
var ressolvedFunc = null;
// Ajax call
$.getJSON(/*blah*/,function(data){
// Generate one function from another
ressolvedFunc = (function(data) {
var innerFunc;
var left = data.left;
var right = data.right;
// Detect action
for (action in data) {
if (action == "doAdd")
innerFunc = function() {
return left + right;
};
else
innerFunc = function() {
return left - right;
};
}
return innerFunc;
})(data);
});
});
The anonymous function returns fresh function, with the new values stored within the enclosure. This should allow you to call the function at later date with the data previously retrieved from the GET request.
Rich

try this:
var doX = (function() {
var
data = [],
getDo = function(action) {
for(var d in data) {
if (data[d][action]) {
return data[d];
}
}
return null;
};
return {
set: function(sdata) {
data.push(sdata);
},
doAdd: function() {
var add = getDo("doAdd");
if (!add)
return 0;
return add.doAdd.left + add.doAdd.right;
},
doSub: function() {
var sub = getDo("doSub");
if (!sub)
return 0;
return sub.doAdd.left + sub.doAdd.right;
}
};
})();
$(document).ready(function{
$.getJSON(/*blah*/,function(data){ doX.set(data); });
});