We Keep Coding

Constructing object array using dynamic keys in react/Javscript

I tried to contrcut the object based on response coming from API.
my key is assigned this.RootKeyValue and my response is assigned to this.keyResponse
this.RootKeyValue is the key of parent of first object .
In second object based on the DynamicKey value need to create the key and values .
this.RootKeyValue = "AccountDetails";
this.keyResponse =
[
{ICICI: 2,DynamicKey: "ICICI"},
{SBI: 1.25,DynamicKey: "SBI"}
{HDFC: 1.75,DynamicKey: "HDFC"}
]
how to construct the object like below using above key and response.
Expected result :
{
AccountDetails :
{ ICICI :2 , SBI: 1.25,HDFC: 1.75 }
}
I am new to react please suggest how to construct object using the dynamic key values

You build a dynamic object using square bracket notation
const obj = { ["SomeDynamicKey"]: someValue }
So in your case you can use reduce to build the object from your array:
this.RootKeyValue = "AccountDetails";
this.keyResponse =
[
{ICICI: 2,DynamicKey: "ICICI"},
{SBI: 1.25,DynamicKey: "SBI"},
{HDFC: 1.75,DynamicKey: "HDFC"}
]
const result = {
[this.RootKeyValue] : this.keyResponse.reduce( (acc,item) => ({
...acc,
[item.DynamicKey]: item[item.DynamicKey]})
,{})
}
console.log(result)

As the give array already has the dynamic keys and associate value in same object , you can create your desired object very easily like this.
let given = [
{ICICI: 2,DynamicKey: "ICICI"},
{SBI: 1.25,DynamicKey: "SBI"},
{HDFC: 1.75,DynamicKey: "HDFC"}
] , AccountDetails = {};
given.forEach(item => {
AccountDetails[item.DynamicKey] = item[item.DynamicKey] ? item[item.DynamicKey] : '';
})
console.log(AccountDetails);

You can use square brackets to handle this very easily, e.g.
const key = 'DYNAMIC_KEY';
const obj = { [key]: 'value' };
const RootKeyValue = "AccountDetails";
const keyResponse = [
{ ICICI: 2,DynamicKey: "ICICI" },
{ SBI: 1.25,DynamicKey: "SBI" },
{ HDFC: 1.75,DynamicKey: "HDFC" }
];
const newData = { [RootKeyValue]: {} };
keyResponse.forEach(item => {
newData[RootKeyValue][item.DynamicKey] = item[item.DynamicKey];
})
console.log(newData)

JavaScript - Replace the values of a Nested Object, without affecting the whole object

The Problem:
I have this function. Which removes all KeyValue Pairs that have an Empty String as value from a Payload.
The problem is, that I want to apply it in an Object that is Nested. Not the whole Payload Object. Example:
configuration: {
conf1: "",
conf2: "Something",
conf3: ""
},
resourceName: "Name"
In this case I want to apply my UtilityFunction, in the configurationObject. Which would result in this:
configuration: {
conf2: "Something",
},
resourceName: "Name"
So, I used a few Methods. Object.assign, rest, in order to supply an object with all the outside parameters, but also, the output of the utility applied to just the configuration object.
I tried:
Object.assign(formValues, removeEmptyKeysUtil(formValues.configuration));
// Results in printing the values in the main object.
Also:
{ formValues, ...removeEmptyKeysUtil(formValues.configuration) };
// which does not do anything
Can you please help me, and explain what am I doing wrong?

The stripEmptyStrings function takes the original object and the target key.
this function can also handle if the target property of the object is "" and will delete that property regardless of if it is an Object or not.
const stripEmptyStrings = (object, target) => {
const _target = object[target];
if (_target === "") {
delete object[target]
return object;
}
else if (typeof _target === "object") {
Object.keys(_target).forEach((k) => {
if (_target[k] === "") delete _target[k];
})
}
return {
...object,
[target]: _target,
}
}
const obj1 = {
configuration: {
conf1: "",
conf2: "Something",
conf3: ""
},
resourceName: "Name",
}
const result1 = stripEmptyStrings(obj1, "configuration");
console.log(result1)
const obj2 = {
removeMe: "",
resourceName: "Name2",
}
const result2 = stripEmptyStrings(obj2, "removeMe");
console.log(result2)

How can you destructure an array of objects in Javascript into two predefined variables in ES6?

I have an array containing one object of this form :
Array = [ { type: type, message: message } ]
I keep getting ESLint errors asking me to use object destructuring and array destructuring.
Currently my code looks like this :
let type=null;
let message=null;
if (data.length > 0) {
({ type, message } = data[0]);
}
So far this works and my variables are assigned correctly, however I am still getting the "Use array destructuring" message from ESLint.
Any help with this would be appreciated. Thank you

You can destructure the array:
let type=null;
let message=null;
if (data.length > 0) {
[{ type, message }] = data;
}
The code above is a shorter version of:
[ firstElement ] = data; // array destructruring
({ type, message } = firstElement); // object destructuring

Faly's way is good. You can also use default values when destructuring:
function test(label, data) {
// 1 -----------------------------vvvvv
let [{type = null, message = null} = {}] = data;
// 2 -----^^^^^^^---------^^^^^^^
console.log(label, type, message);
}
test("test1: ", []);
test("test2: ", [{type: "t"}]);
test("test3: ", [{type: "t", message: "m"}]);
That works because if data.length is 0, data[0] is undefined, and so triggers use of the default value {} (1) for the array part of that; within the object part of that, we use null (2) to handle any missing values on the object as well.

EsLint wants you to write
let type = null;
let message = null;
if (data.length > 0) {
[{ type, message }] = data;
}
which destructures the first item of an iterable data into the {type, message} target. (More items are ignored).
I would however recommend to use default values for the empty case:
const [{type, message} = {type:null, message:null}] = data;
or also
const [{type = null, message = null} = {}] = data;

React: Calling filter on Object.keys

A React component is passed a state property, which is an object of objects:
{
things: {
1: {
name: 'fridge',
attributes: []
},
2: {
name: 'ashtray',
attributes: []
}
}
}
It is also passed (as a router parameter) a name. I want the component to find the matching object in the things object by comparing name values.
To do this I use the filter method:
Object.keys(this.props.things).filter((id) => {
if (this.props.things[id].name === this.props.match.params.name) console.log('found!');
return (this.props.things[id].name === this.props.match.params.name);
});
However this returns undefined. I know the condition works because of my test line (the console.log line), which logs found to the console. Why does the filter method return undefined?

Object.keys returns an array of keys (like maybe ["2"] in your case).
If you are interested in retrieving the matching object, then you really need Object.values. And if you are expecting one result, and not an array of them, then use find instead of filter:
Object.values(this.props.things).find((obj) => {
if (obj.name === this.props.match.params.name) console.log('found!');
return (obj.name === this.props.match.params.name);
});
Be sure to return that result if you use it within a function. Here is a snippet based on the fiddle you provided in comments:
var state = {
things: {
1: {
name: 'fridge',
attributes: []
},
2: {
name: 'ashtray',
attributes: []
}
}
};
var findThing = function(name) {
return Object.values(state.things).find((obj) => {
if (obj.name === name) console.log('found!');
return obj.name === name;
});
}
var result = findThing('fridge');
console.log(result);

You need to assign the result of filter to a object and you get the result as the [id]. You then need to get the object as this.props.things[id]
var data = {
things: {
1: {
name: 'fridge',
attributes: []
},
2: {
name: 'ashtray',
attributes: []
}
}
}
var name = 'fridge';
var newD = Object.keys(data.things).filter((id) => {
if (data.things[id].name === name) console.log('found!');
return (data.things[id].name === name);
});
console.log(data.things[newD]);

Accessing the query variable from within callback

Take the following example:
getOptions() {
let options = {};
if (this.props.location.hasOwnProperty('query')) {
const query = this.props.location.query;
const queriesMap = {
'createdBy': 'createdBy',
'state': 'state',
'created_from': 'created_at[from]',
'created_to': 'created_at[to]'
};
Object.keys(query).map(function(key) {
if(queriesMap.hasOwnProperty(key)) {
options = Object.assign(options, { queriesMap[key]: query[key] });
}
});
}
return options;
}
I'm using the queriesMap object to map url parameters to build a new url to call an API. The problem is that query is undefined when I'm trying to access it from within the .map callback.
How do I access the query variable?

Looks like you are missing a [] around queriesMap[key]. So it should be options = Object.assign(options, { [queriesMap[key]]: query[key] });.
Also, you could just do options[queriesMap[key]] = query[key] rather than Object.assign