Develop Reference

Multiple If Else Statements, only first is run

I have code that requires multiple If Else statements but I'm not sure how to format it so that each runs:
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
return null;
} else {
return something;
}
if (example2 === somethingElse) {
return null;
} else {
return somethingElse;
}
if (example3 === somethingMore) {
return null;
} else {
return somethingMore;
}
But this doesn't work because of the multiple else statements, I was wondering if there was a way to do this? I also tried to put the data into an array or objects to iterate through but that won't work either.
Please help! :)

return will immediate return from first if, so store all result in object or array and return it as below
let example = 'first';
let example2 = 'second';
let example3 = 'third';
var return_data = {};
if (example === 'something') {
return_data.example = null;
} else {
return_data.example = something;
}
if (example2 === 'somethingElse') {
return_data.example2 = null;
} else {
return_data.example2 = 'somethingElse';
}
if (example3 === 'somethingMore') {
return_data.example3 = null;
} else {
return_data.example3 = 'somethingMore';
}
return return_data;

You have to remove the return in the if / else blocks - using return will immediately exit the function wherever it's encountered. The way your code is now, you are basically short-circuiting the function (which is not what you're trying to do):
It would probably make more sense to restructure your code to use a variable like this:
//Add a variable to keep store your desired output if you want to flow thru all if/else blocks
function getVal(example) {
let val;
if (example === 'something1') {
val = 'a'
} else {
val = 'b';
}
return val;
}
console.log(getVal('something1'));
console.log(getVal('lorem'));

I'm not completely clear on what you are asking, but I think you want to be using "else if" statements: https://ncoughlin.com/javascript-notes-conditional-statements-loops/#If_Else_If_Else
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
return a;
} else if (example2 === somethingElse){
return b;
} else if (example3 === anotherThing){
return c;
} else {
return null;
}

You can do something like this :
myArray = [];
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
myArray.push(null);
} else {
myArray.(something);
}
if (example2 === somethingElse) {
myArray.push(null);
} else {
myArray.(somethingElse);
}
if (example3 === somethingMore) {
myArray.push(null);
} else {
myArray.(somethingMore);
}
return myArray;
Like Tom O. said return will immediatly exit your function. You can use something other than an array but remember return is executed only once.

Regardless of your approach, it seems like you want to build a "collection" of some sort (array, object, set, map, etc) then return it at the end.
But, the way you code it depends on the reason your function exists. Let's look at an example...
if (first === undefined) {
return null
} else {
return first
}
...This logic exists solely to ensure a "default" value is used for first - something like the null object pattern. For this use case, I might propose nullish coalescing to keep it simple (or something that could be easily replaced with it in the future):
first ?? null
// or, if you don't use babel/some kind of transpiler, you could want:
first !== undefined && first !== null ? first : null
// and since our default is null anyway, we can shorten this to:
first !== undefined ? first : null
Looking solely at your example, it seems like you could simply want to get default values like this for multiple variables. For that use case, you (or someone else coming across this question) might want a function similar to one in the code snippets below. Using objects and/or arrays for this can be handy because they can also be easily broken back out into multiple variables, if you wanted.
First, example functions using arrays:
// If you want default values for items in an array (static, all same default value)
const buildArrayWithDefault = (vals, defaultVal = null) => vals.map(
v => v !== undefined ? v : defaultVal // could be v ?? defaultVal
)
// If you want default values for items in an array (static, but defaults could all be different)
const buildArrayWithDefaults = (vals, defaultVals) => vals.map(
(v, idx) => v !== undefined ? v : defaultVals[idx] // could be v ?? defaultVals[idx]
)
// If you want default values for items in an array (dynamic via callback)
const buildArrayWithDefaults2 = (vals, getDefaultValue) => vals.map(
(v, idx) => v !== undefined ? v : getDefaultValue(v, idx)
)
// All of these return [ 1, 5, 3 ]
console.log(
buildArrayWithDefault([1, undefined, 3], 5),
buildArrayWithDefaults([1, undefined, 3], [ 4, 5, 6 ]),
buildArrayWithDefaults2([1, undefined, 3], (v, idx) => idx + 4)
)
Next, examples using objects:
// Hard-coded default values for an object (ternary)
const buildObject = (first, second, third) => ({
first: first !== undefined ? first : null, // or first ?? null
second: second !== undefined ? second : null,
third: third !== undefined ? third : null,
})
// Hard-coded default values for an object (default parameters)
const buildObject2 = (
first = null,
second = null,
third = null
) => (
{ first, second, third }
)
// ...or you can just use Object.assign()
const assignDefaults = (obj) => Object.assign(
{ first: null, second: null, third: null }, // defaults
obj
)
// Finally, allowing the function user to define their own defaults
// (At this point, you may just want to use Object.assign() directly)
const assignDefaults2 = (...args) => Object.assign({}, ...args.reverse())
// All of these should return { first: 1, second: null, third: null }
console.log(
buildObject(1),
buildObject2(1),
assignDefaults({ first: 1 }),
assignDefaults2({ first: 1 }, { first: null, second: null, third: null })
)

Set observable property of object by path

I have an object that could have any number of levels and could have any existing properties. Besides, the object and/or its properties may be observable.
For example:
var obj = {
prop: "qqq",
obsProp: ko.observable({
nestedObsProp: ko.observable({
prop: 'value'
})
})
};
I need to have a way to set all properties (both observable and non-observables) of any nested levels in a way something like this:
set(obj, 'obsProp.nestedObsProp.prop', 'new value');
I tried to use lodash function _.set(), it works only if properties are not observables, but properties in obj (which I have to update) can be both - observable or not.
I'd appreciate any help, thanks.

function set (source, key, newValue) {
const hierarchy = key.split('.');
const property = hierarchy.pop();
const retrived = hierarchy.reduce((source, key) => {
return source[key];
}, source) || source;
if (ko.isObservable(retrived[property])) {
retrived[property](newValue);
} else {
retrived[property] = newValue;
}
}

yoel neuman, thank you for your answer, it helped me a lot. I took your function as base approach with small corrections:
function set(source, path, newValue) {
const hierarchy = path.split('.');
const property = hierarchy.pop();
var retrieved = hierarchy.reduce((source, key) => {
return ko.isObservable(source) ? source()[key] : source[key];
}, source) || source;
retrieved = ko.isObservable(retrieved) ? retrieved() : retrieved;
if (ko.isObservable(retrieved[property])) {
retrieved[property](newValue);
} else {
retrieved[property] = newValue;
}
}
Unfortunately, I have not enough reputation to vote for your answer. Much appreciated your help!

Copy object's attributes without having to repeat all the variable names?

I have an object and I'd like to change some of its attributes' names from mixedCase to snake_case without modifying the original object, and without having to re-write all the variable names twice. This example only includes two variables, but in my real code there are 10+ of them and it feels silly to repeat it all just to get two mixedCase variables into snake_case:
function do_stuff(data) {
const { totalScore, position } = data;
const params = { total_score: totalScore, position };
return do_more_stuff(params);
}

You could use these functions:
function snakeCase(s) {
return s.replace(/([A-Z])/g, c => '_' + c.toLowerCase());
}
function snakeCaseKeys(obj) {
return Object.keys(obj).reduce( (acc, key) =>
Object.assign(acc, { [snakeCase(key)]: obj[key] }), {} );
}
// Sample use:
const params = snakeCaseKeys({totalScore: 1, position: 2});
console.log(params);

Transform all keys in array from underscore to camel case in js

So, I need to transform all keys in array from underscore to camel space in js. That is what I need to do before send form to server. I'm using Angular.js and I want to represent it as a filter (but I think it's not rly important in this case). Anyway, here is a function I've created.
.filter('underscoreToCamelKeys', function () {
return function (data) {
var tmp = [];
function keyReverse(array) {
angular.forEach(array, function (value, key) {
tmp[value] = underscoreToCamelcase(key);
});
return tmp;
}
var new_obj = {};
for (var prop in keyReverse(data)) {
if(tmp.hasOwnProperty(prop)) {
new_obj[tmp[prop]] = prop;
}
}
return new_obj;
};
function underscoreToCamelcase (string) {
return string.replace(/(\_\w)/g, function(m){
return m[1].toUpperCase();
});
}
})
Here I will try to explain how it works, because it looks terrible at first.
underscoreToCamelcase function just reverting any string in underscore to came case, except first character (like this some_string => someString)
So, as I said earlier, I should revert all keys to camel case, but as you understant we can't simply write
date[key] = underscoreToCamelcase(key)
so keyReverse function returns a reverted array, here is example
some_key => value
will be
value => someKey
and for the last I simply reverting keys and values back, to get this
someKey => value
But, as you already may understand, I got a problem, if in array exists the same values, those data will be dissapear
array
some_key1 => value,
some_key2 => value
returns as
someKey2 => value
So how can I fix that? I have a suggestion to check if those value exists and if it is add some special substring, like this
some_key1 => value,
some_key2 => value
value => someKey1,
zx99value => someKey2
and after all parse it for zx99, but it I think I`m going crazy...
Maybe some one have a better solution in this case?
Important! Them main problem is not just to transform some string to camel case, but do it with array keys!

If you use an existing library to do the camelCase transform, you can then reduce an object like so
import {camelCase} from 'lodash/string'
const camelCaseKeys = (obj) =>
Object.keys(obj).reduce((ccObj, field) => ({
...ccObj,
[camelCase(field)]: obj[field]
}), {})

.filter('underscoreToCamelKeys', function () {
return function (data) {
var tmp = {};
angular.forEach(data, function (value, key) {
var tmpvalue = underscoreToCamelcase(key);
tmp[tmpvalue] = value;
});
return tmp;
};
function underscoreToCamelcase (string) {
return string.replace(/(\_\w)/g, function(m){
return m[1].toUpperCase();
});
}
})
thanks to ryanlutgen

As an alternative solution, you could use the optional replacer parameter of the JSON.stringify method.
var result = JSON.stringify(myVal, function (key, value) {
if (value && typeof value === 'object') {
var replacement = {};
for (var k in value) {
if (Object.hasOwnProperty.call(value, k)) {
replacement[underscoreToCamelcase(k)] = value[k];
}
}
return replacement;
}
return value;
});
Of course you'll end up with a string and have to call JSON.parse to get the object.

React JS : How to highlight partial data changes?

I have a React JS dashboard page that poll's a json URL every second. Most of the time the data is the same but as soon as part of it changes I would like to highlight the change part.
Is there a way to determine what parts of the data changed allowing me to highlight them for a second or two?

In your child components, implement componentWillReceiveProps where you can compare newly passed props to the current ones. If you spot a difference between the two objects, set state to something like "justChanged: true" and display accordingly.

If I understood right, you're probably needing something like this one: http://codepen.io/zvona/pen/XdWoBW
let originalJSON = {foo:'bar', foz: 'baz'}
let alteredJSON = {foo: 'barbar', fam: 'bam'}
const getOriginal = function(key, original, altered) {
const obj = {}
if (altered[key] && altered[key] !== original[key]) {
// highlight here, if needed
obj[key] = altered[key]
} else {
obj[key] = original[key]
}
return obj
}
const getAltered = function(key, original, altered) {
const obj = {}
if (original[key] || altered[key] === original[key]) {
return false
} else {
// highlight here, if needed
obj[key] = altered[key]
}
return obj
}
const getFinal = function(original, altered) {
return Object.keys(original)
.map((key) => getOriginal(key, original, altered))
.concat(
Object.keys(altered)
.map((key) => getAltered(key, original, altered))
)
.filter((item) => { return item })
.reduce((prev, next) => { return Object.assign(prev, next) })
}
let final = getFinal(originalJSON, alteredJSON)
In this case, final outputs: {foo: "barbar", foz: "baz", fam: "bam"}. Now the highlighting should be done in getOriginal and getAltered functions.