Develop Reference

Merge or extend JavaScript functions

I am trying to get the values of several input fields and then displaying those values somewhere else on the page using JS functions. I will have 10 input fields, therefore is there a way I can optimize my JS code and write a function to loop through the values of the input fields and display them afterwards? Here are two functions which I wrote for two different fields:
function gotoTask() {
var message = document.getElementById("goto").value;
goto_message.innerHTML = message;
}
function waitTask() {
var message = document.getElementById("wait").value;
wait_message.innerHTML = message;
}

You could write a curry/factory function:
function createTaskFn(el, messageElId) {
return function() {
var message = document.getElementById(messageElId).value;
el.innerHTML = message;
};
}
var gotoTask = crateTaskFn(goto_message, 'goto');
var waitTask = crateTaskFn(wait_message, 'wait');

Give same class to your all inputs , then select them by let inputArr = document.getElementsByClassName('inputsClass') , then loop through inputArr and display their values.

You could store all the ids in an array like so
const inputIds = ['goto', 'wait', ...]
Then you can iterate over that array and call your method like so
inputIds.forEach((id) => {
const message = document.getElementById(id).value;
document.getElementById(`${id}_message`).innerHTML = message;
})
Disadvantage of my implementation: Your ids of the message fields have to have the same structure [id]_message

Populating array with objects from looping through checked radio buttons gives same value each time

Code below:
$(".day_a_radio").change(function()
var radio_array = [];
var radio_object = {};
$("input.day_a_radio:checked").each(function() {
radio_object["id"] = $(this).data("id");
radio_object["date"] = $(this).data("date");
radio_object["type"] = $(this).data("type");
radio_array.push(radio_object);
});
console.log(radio_array);
I have a few dozen radio buttons with data attributes of id, date and type. When one of them is clicked, I loop through them all. Then within that loop, for each one that is checked, I populate an array with objects.
However, when I do the console.log, the ID, date and type are all the same despite all the radio buttons having different values
Any ideas?

You have to make a new object, otherwise the same one is updated and pushed repeatedly.
$(".day_a_radio").change(function(){
var radio_array = [];
var radio_object = {};
$("input.day_a_radio:checked").each(function() {
// MAKE A NEW OBJECT
radio_object = {};
radio_object["id"] = $(this).data("id");
radio_object["date"] = $(this).data("date");
radio_object["type"] = $(this).data("type");
radio_array.push(radio_object);
});
You could also simplify this a little with a map.
$(".day_a_radio").change(function(){
var radio_array = $("input.day_a_radio:checked").map(function() {
var $this = $(this);
return {
id: $this.data("id"),
date: $this.data("date"),
type: $this.data("type")
};
}).get();
});

You're pushing the same reference to array every time you need to create a new copy every time and than push
$(".day_a_radio").change(function()
var radio_array = [];
$("input.day_a_radio:checked").each(function() {
var obj = {} // It creates a new object everytime
obj["id"] = $(this).data("id");
obj["date"] = $(this).data("date");
obj["type"] = $(this).data("type");
radio_array.push(obj);
});
console.log(radio_array);

Add Relational Query Data to main JSON result

in my Angular app I'm trying to display a set of results that come from three Classes. Data is stored on Parse.com.
I can do just fine with the Pointer relation type for one-to-one (associated scores are being returned).
Problem starts when I try to include data from the Location class into my final returned JSON.
Hopefully this is just a basic notation thing I'm missing.
Thanks a lot!
Doctors
String: firstname
Pointer: score
Relation: location
Scores
Number: scoreOne
Number: scoreTwo
Locations
String: name
String: address
.controller('BrowseCtrl', function($scope) {
// Get "Doctors" and associated "Scores"
// via Pointer in Doctors Class named "score"
var query = new Parse.Query("Doctors");
query.include("score");
query.find()
.then(function(result){
var doctorsArray = new Array();
for(i in result){
var obj = result[i];
var doctorIds = obj.id;
var docFirstname = obj.get("firstname");
var mainScore = obj.get("score").get("mainScore");
doctorsArray.push({
Scores:{
DocMainScore: mainScore
},
firstname: docFirstname,
});
}
// Get Locations.
// -can be more than one per Doctor
// Class Doctors has a Relation column "location" pointing to Locations
var locationsArray = new Array();
var locationRelation = obj.relation('location');
var locationQuery = locationRelation.query();
locationQuery.find({
success: function(locations) {
for(j in locations){
var locObj = locations[j];
var locName = locObj.get("name");
console.log(locName);
}
}
})
// send data to the view
$scope.myData = doctorsArray;
console.log(doctorsArray);
});
})
What I am trying to do is get the data from Locations into the doctorsArray.

First of all, you are using obj outside the for where it's assigned. This way it'll only get location for the last doc, I'm pretty sure it's not what you wanted.
What you want must be something like this:
// inside your Doctors query result
Parse.Promise.when(
// get locations for all doctors
result.map(function(doc) {
return doc.relation('location').query().find();
})
).then(function() {
var docsLocations = arguments;
// then map each doctor
$scope.myData = result.map(function(doc, i) {
// and return an object with all properties you want
return {
Scores: {
DocMainScore: doc.get('score').get('mainScore')
},
firstname: doc.get('firstname'),
locations: docsLocations[i]
};
});
});

Get selected data from checkbox in a form

I have a form with multiple checkboxes where I display checkbox data from a JSON file using ng-repeat. Now, when I submit the form, I want to get the checked data from the checkboxes. How can I access checked data after the form is submitted?
I did some research and now I can display the checked data on page itself using ng-model="s.checked" but how can I access the checked data at controller's end.
See this Plunk for details

The structure of $scope.List hasn't changed when you submit, it's still an array of objects. You could do something like
$scope.submit = function() {
var checkedItems = $scope.List.filter(function(item){
return item.checked;
});
console.log(checkedItems);
};
The values of the List items have changed.
(Also, it's generally a good idea to use ngSubmit)

You have array of objects:
$scope.list = [
{"ID":5000,"Name":"ABC",checked:true},
{"ID":5001,"Name":"DEF",checked:false},
{"ID":5002,"Name":"XYZ",checked:false}];
so you can access the values of checked properties like this:
$scope.submit = function() {
var val1 = $scope.list[0].checked;
var val2 = $scope.list[1].checked;
var val3 = $scope.list[2].checked;
}
Or with the use of forEach statement:
$scope.submit = function() {
angular.forEach($scope.list, function (listValue) {
var val = listValue.checked;
});
}

How to convert values of an array into recursive field names of another variable in Javascript

I need to convert values from one Array variable into fields of another variable in Javascript.
My variable is
field = ["entries", "body"]
and it needs to become something like
req.body.entries.body
I tried doing something like
field.forEach(function(prop){
req.body[prop] = "...";
}
but that works only on req.body.entries and req.body.body. And I need it to go all the way to req.body.entries.body
I'm doing this to get the data from a form in a document field (named entries[body]), do some cleaning up on that data, and then pass it back to node.js as if it was the request that was originally made.
UPDATE
All I need to do is to basically
exports.sanitize = function(field){
// field = ["entry","body"];
return function(req, res, next){
val = getField(req, field); // val = "Some string with data"
val = some_process(val); // some_process is a function that cleans up the string
req.body.entry.body = val; // HOW TO TAKE entry.body from the field array???
next();
}
};
As you can see, all I want is to NOT hard code entry.body but take it from field array values that passes the name of the field for processing.
If you can think of a more elegant solution to do this, please, let me know.
Thanks!

This works:
var fields = [ "field1", "field2", "field3", "field4" ];
var obj = req.body;
fields.forEach(function(prop) {
obj[prop] = {};
obj = obj[prop];
});

You want
var obj = req.body;
for (var i=0; i<fields.length-1; i++)
obj = obj[fields[i]];
var prop = fields[i];
obj[prop] = cleanUp(obj[prop]);

This will work only if req.body.entries.body is already defined:
field = ["entries","body"];
var toeval="req.body";
field.forEach(function(prop){
toeval+="."+prop;
});
toeval+="=\"...\"";
eval(toeval);

I was able to accomplish this using recursion. Hope this helps!
var foo = {
bar: {}
};
var fields = ['foobar', 'barfoo'];
function setVar (currentVar, arr, counter) {
if (arr[counter] === undefined) {
return;
}
currentVar[arr[counter]] = {};
setVar(currentVar[arr[counter]], arr, counter + 1);
}
setVar(foo.bar, fields, 0);