Hi everyone I have following code
I want to show my DefaultValue nested objects like this
["DefaultValue", "DefaultValue", "DefaultValue","DefaultValue","DefaultValue","DefaultValue"]
I have following data from backend:
const data = [
{
id: 243,
Name: "test",
type: "checkbox",
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: ["a"]
}
}
}
}
}
}
];
So I am trying to do following, but it's not works, its says like Cannot convert undefined or null to object
const innerObject = o => {
return Object.keys(o).reduce(function (r, k) {
return typeof o[k] === 'object' ? innerObject(o[k]) : ((r[k] = o[k]), r);
}, {});
};
Please help me to resolve this problem.
you can try this:
const data = [
{
id: 243,
Name: "test",
type: "checkbox",
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: ["a"]
}
}
}
}
}
}
];
const makeArr = (obj, arr = []) =>{
if(typeof obj === 'object' && obj !== null){
arr.push('DefaultValue');
return makeArr(obj.DefaultValue, arr)
}else{
return arr;
}
}
console.log(makeArr(data[0].DefaultValue))
Related
I got this type of object:
const obj = {
group: {
data: {
data: [
{
id: null,
value: 'someValue',
data: 'someData'
}
]
}
}
};
I need to edit this object so whenever null is in the property value,
it would be replaced with some string.
Meaning if the replacement string will be 'someId',
the expected outcome is:
const obj = {
group: {
data: {
data: [
{
id: 'someId',
value: 'someValue',
data: 'someData'
}
]
}
}
};
Closest I found were this and this but didn't manage to manipulate the solutions there to what i need.
How should I do it?
Probably running into issues with the array values. Pass in the index of the array to modify. In this case [0]
obj.group.data.data[0].id = "someId"
EDIT
This will update all null values of id inside the data array:
obj.group.data.data.forEach(o => {
if (o.id === null) {
o.id = "someId"
}
})
Another EDIT
Here is an algorithm to recursively check all deeply nested values in an object. It will compile an array of object paths where null values live. There is an included helper method to find and update the value of the object at the given path in the array. There is a demonstration of the program in the console.
const object = {
group: {
data: {
data: [
{
id: null,
value: "foo",
data: [null, "bar", [null, { stuff: null }]]
},
{
id: null,
value: null,
data: {
bar: [null]
}
},
{
id: null,
value: "foo",
data: null
},
{
id: 4,
value: "foo",
data: "bar"
},
{
id: 4,
value: "stuff",
data: null
}
]
},
attributes: null,
errors: ["stuff", null]
}
}
const inspectProperty = (key, obj, path = "") => {
if (typeof obj[key] === "object") {
if (obj[key] instanceof Array) {
return analyzeArray(obj[key], `${path ? path + "." : ""}${key}`);
}
return analyzeObj(obj[key], `${path ? path + "." : ""}${key}`);
}
return [];
};
const analyzeKey = (obj, key, path = "") => {
if (obj[key] === null) return [`${path ? path + "." : ""}${key}`];
return inspectProperty(key, obj, path).reduce((a, k) => [...a, ...k], []);
};
const analyzeObj = (obj, path = "") => {
return Object.keys(obj).map((item) => analyzeKey(obj, item, path));
};
const analyzeArray = (array, path) => {
return array.map((item, i) => analyzeKey(array, i, path));
};
const updateNullValue = (path, value) => {
let p = path.split(".");
p.reduce((accum, iter, i) => {
if (i === p.length - 1) {
accum[iter] = value;
return object;
}
return accum[iter];
}, object);
};
let nullValues = analyzeObj(object)[0]
console.log(nullValues)
nullValues.forEach((nullVal, i) => {
updateNullValue(nullVal, "hello-" + i)
})
console.log(object)
I trying to generate all possible paths of the given json object. Some how I generated the paths but I want my final array in a flatten manner (no nested arrays inside the final array).
I tried speading the array, but the final array contains some nested arrays. I want to have all the elements in a flatter manner.
Current op:
[
"obj",
"level1.level2.level3.key",
[
"arrayObj.one[0].name",
"arrayObj.one[0].point"
]
]
Expected:
[
"obj",
"level1.level2.level3.key",
"arrayObj.one[0].name",
"arrayObj.one[0].point"
]
Below I have attached the snippet I tried.
const allPaths = (obj, path = "") =>
Object.keys(obj).reduce((res, el) => {
if (Array.isArray(obj[el]) && obj[el].length) {
return [...res, ...obj[el].map((item, index) => {
return [...res, ...allPaths(item, `${path}${el}[${index}].`)];
})];
} else if (typeof obj[el] === "object" && obj[el] !== null) {
return [...res, ...allPaths(obj[el], `${path}${el}.`)];
}
return [...res, path + el];
}, []);
const obj = {
obj: 'sample',
level1: {
level2: {
level3: {
key: 'value'
}
}
},
arrayObj: {
one: [{
name: 'name',
point: 'point'
},
{
name: 'name2',
point: 'point2'
},
{
name: 'name2',
point: 'point2'
}
]
}
}
console.log(allPaths(obj));
UPDATE: I didn't understood the question previously correctly. Now i do. So yes the below code will solve the problem for you.
You want your object to be flattened with dots
If thats the case the below should work
const obj = {
obj: 'sample',
level1: {
level2: {
level3: {
key: 'value'
}
}
},
arrayObj: {
one: [{
name: 'name',
point: 'point'
},
{
name: 'name2',
point: 'point2'
},
{
name: 'name2',
point: 'point2'
}
]
}
}
function flatten(data, prefix) {
let result = {}
for(let d in data) {
if(typeof data[d] == 'object') Object.assign(result, flatten(data[d], prefix + '.' + d))
else result[(prefix + '.' + d).replace(/^\./, '')] = data[d]
}
return result
}
console.log(flatten(obj, ''))
I am trying to get the change object from two objects using typescript in angular.
For example
this.productPreviousCommand = {
"id": "60f910d7d03dbd2ca3b3dfd5",
"active": true,
"title": "ss",
"description": "<p>ss</p>",
"category": {
"id": "60cec05df64bde4ab9cf7460"
},
"subCategory": {
"id": "60cec18c56d3d958c4791117"
},
"vendor": {
"id": "60ced45b56d3d958c479111c"
},
"type": "load_product_success"
}
model = {
"active": true,
"title": "ss",
"description": "<p>ss sss</p>",
"category": "60cec05df64bde4ab9cf7460",
"subCategory": "60cec18c56d3d958c4791117",
"vendor": "60ced45b56d3d958c479111c",
"tags": []
}
Now the difference between two objects are description: "<p>hello hello 1</p>". So I want to return {description: "<p>hello hello 1</p>"}
I used lodash https://github.com/lodash/lodash
import { transform, isEqual, isObject, isArray} from 'lodash';
function difference(origObj, newObj) {
function changes(newObj, origObj) {
let arrayIndexCounter = 0
return transform(newObj, function (result, value, key) {
if (!isEqual(value, origObj[key])) {
let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
}
})
}
return changes(newObj, origObj)
}
This library is not working for me, it returns the whole object using this code const differenc = difference(this.productPreviousCommand, model);
The output of above code is
{
active: true
description: "<p>hello hello 1</p>"
id: "60f8f29dd03dbd2ca3b3dfd1"
title: "hello"
}
Try this function
differenceInObj(firstObj: any, secondObj: any): any {
let differenceObj: any = {};
for (const key in firstObj) {
if (Object.prototype.hasOwnProperty.call(firstObj, key)) {
if(firstObj[key] !== secondObj[key]) {
differenceObj[key] = firstObj[key];
}
}
}
return differenceObj;
}
You can check loop through each key of the first object and compare it with the second object.
function getPropertyDifferences(obj1, obj2) {
return Object.entries(obj1).reduce((diff, [key, value]) => {
// Check if the property exists in obj2.
if (obj2.hasOwnProperty(key)) {
const val = obj2[key];
// Check if obj1's property's value is different from obj2's.
if (val !== value) {
return {
...diff,
[key]: val,
};
}
}
// Otherwise, just return the previous diff object.
return diff;
}, {});
}
const a = {
active: true,
description: '<p>hello</p>',
id: '60f8f29dd03dbd2ca3b3dfd1',
title: 'hello',
};
const b = {
active: true,
description: '<p>hello hello 1</p>',
id: '60f8f29dd03dbd2ca3b3dfd1',
title: 'hello',
};
const c = {
active: true,
description: '<p>hello hello 2</p>',
id: '60f8f29dd03dbd2ca3b3dfd1',
title: 'world',
};
console.log(getPropertyDifferences(a, b));
console.log(getPropertyDifferences(b, c));
function difference(origObj, newObj) {
const origObjKeyList = Object.keys(origObj),
newObjKeyList = Object.keys(newObj);
// if objects length is not same
if (origObjKeyList?.length !== newObjKeyList?.length) {
return;
}
// if object keys some difference in keys
if (Object.keys(origObj).filter((val) => !Object.keys(newObj).includes(val))?.length) {
return;
}
return Object.entries(origObj).reduce(
(acc, [key, value]) => (newObj[key] !== value ? { ...acc, ...{ [key]: newObj[key] } } : acc),
[]
);
}
const a = {
active: true,
description: '<p>hello</p>',
id: '60f8f29dd03dbd2ca3b3dfd1',
title: 'hello',
};
const b = {
active: true,
description: '<p>hello hello 1</p>',
id: '60f8f29dd03dbd2ca3b3dfd1',
title: 'hello',
};
console.log(difference(a, b));
You can try this code.
function difference(origObj, newObj) {
const origObjKeyList = Object.keys(origObj),
newObjKeyList = Object.keys(newObj);
// if objects length is not same
if (origObjKeyList?.length !== newObjKeyList?.length) {
return;
}
// if object keys is not same
if (Object.keys(origObj).filter((val) => !Object.keys(newObj).includes(val))?.length) {
return;
}
return Object.entries(origObj).reduce(
(acc, [key, value]) => (newObj[key] !== value ? { ...acc, ...{ [key]: newObj[key] } } : acc),
[]
);
}
I have the following sample arr:
const fetchedArr = [
{ id: "3cc74658-a984-4227-98b0-8c28daf7d3d4", type: a },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: a },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: b }
]
i need the following output :
const arr = [
{ id: "3cc74658-a984-4227-98b0-8c28daf7d3d4", type: a, checked: true },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: a, checked: true, hasPair: true }
]
I have the following snippet which works
const newLegendItems = fetchedArr
.reduce((acc, curr, idx, arr) => {
const singleComponentLines = arr.filter((g) => g.id === curr.id);
const exists = !!acc.find((x) => x.id === curr.id);
if (!exists) {
if (singleComponentLines.length === 2 && singleComponentLines.includes(curr)) {
acc[idx] = {...curr, hasPair: true};
} else {
acc[idx] = curr;
}
}
return acc;
}, [])
.map((l) => ({ ...l, checked: true }));
, but i was thinking if there's simpler way to achieve this?
I should clarify that in the fetchedArr, the type does not matter, and that there won't be more than two same Id's, hence my idea for singleComponentLines.length === 2.
Like this?
const fetchedArr = [
{ id: "3cc74658-a984-4227-98b0-8c28daf7d3d4", type: "a" },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: "a" },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: "b" }
];
let result = fetchedArr.reduce((acc,v) => {
//first i need to check if i already have an element with the same ID in my accumulator. i either get -1 for not found or the index where the element is.
let i = acc.findIndex(el => el.id === v.id);
if(i !== -1) {
//if there is an element then access the element in the array with a[i] and add a new property to the object with ["hasPair"] and set it to true
acc[i]["hasPair"] = true;
return acc;
}
//in case i = -1 what means not found
return [...acc, {...v, checked: true}];
},[])
console.log(result);
I don't fully understand your question but it should help:
const result = [{
id: "3cc74658-a984-4227-98b0-8c28daf7d3d4",
type: 'a'
},
{
id: "9b96e055-dc2a-418c-9f96-ef449e34db60",
type: 'a'
},
{
id: "9b96e055-dc2a-418c-9f96-ef449e34db60",
type: 'b'
}
].reduce((acc, el) => {
const idx = acc.findIndex(it => it.id === el.id);
if (idx > -1) {
acc[idx] = { ...acc[idx],
hasPair: true
}
} else {
acc.push({ ...el,
checked: true
});
}
return acc;
}, []);
console.log(result)
I rather use a Map for this kind of things since it brings more readability IMO.
Start by checking if we already have it
Update our component and add it to the Map
The only "tricky" thing is that we need to iterate over .values() to grab our updated components, but thanks to spread operator it's quite easy.
const components = [
{ id: "3cc74658-a984-4227-98b0-8c28daf7d3d4", type: 'a' },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: 'a' },
{ id: "9b96e055-dc2a-418c-9f96-ef449e34db60", type: 'b' },
];
const newLegendItems = components
.reduce((acc, component) => {
if (acc.has(component.id)) {
acc.get(component.id)['hasPair'] = true;
} else {
acc.set(component.id, { ...component, checked: true });
}
return acc;
}, new Map());
console.log([...newLegendItems.values()]);
I've figured out how to create an object based on an array, now I'm trying to understand how to build an array back from that object.
with the object
{
social: {
children: {
swipes: {
children: {
women: null,
men: null
}
}
}
},
upgrade: {
children: {
premium: null
}
}
}
how do I create an array of
['/social/swipes/women', '/social/swipes/men', '/upgrade/premium']
?
so far I've just written a function to iterate through the object
let iterate = obj => {
const urls = [];
for (let k in obj) {
if (obj[k] !== null && obj[k].hasOwnProperty('children')) {
console.log('iterating through key: ', k)
iterate(obj[k].children)
} else {
console.log(k, 'is null')
}
}
}
I'd use a generator for that:
function* paths(obj, previous = "") {
for(const [key, value] of Object.entries(obj)) {
if(typeof value === "object" && value !== null) {
yield* paths(value.children, previous + "/" + key);
} else {
yield previous + "/" + key;
}
}
}
That can be called as:
console.log([...paths({ social: { /*...*/ } })]);
Here's a simple recursive approach that avoids adding any children keys to the path:
const pathify = (data, path = "", res = []) => {
Object.keys(data).forEach(k => {
if (data[k] === null) {
res.push(`${path}/${k}`);
}
else {
pathify(data[k], path + (k === "children" ? "" : `/${k}`), res);
}
});
return res;
};
console.log(
pathify({
social: {
children: {
swipes: {
children: {
women: null,
men: null
}
}
}
},
upgrade: {
children: {
premium: null
}
}
})
);
You could take an iterative and recursive approach by collecting all keys and then build the joined strings.
function getKeys(object) {
return Object
.entries(object)
.reduce((r, [k, v]) =>
r.concat(v && typeof v === 'object' && v.children
? getKeys(v.children).map(sub => [k].concat(sub))
: k
),
[]
);
}
var data = { social: { children: { swipes: { children: { women: null, men: null } } } }, upgrade: { children: { premium: null } } },
result = getKeys(data).map(a => a.join('/'));
console.log(result);
Same with a generator and a signature without a second parameter for the collecting array.
function* getKeys(object) {
var k;
for ([k, v] of Object.entries(object)) {
if (v && typeof v === 'object' && v.children) {
yield* Array.from(getKeys(v.children), sub => [k].concat(sub));
} else {
yield [k];
}
}
}
var data = { social: { children: { swipes: { children: { women: null, men: null } } } }, upgrade: { children: { premium: null } } },
result = Array.from(getKeys(data), a => a.join('/'));
console.log(result);