We Keep Coding

ES5 JavaScript: Find specific property in nested objects and return its value

I need to return the value of a specific property of nested objects with ES5 syntax. Every object can have its own structure, so the needed property can be on different levels/places. E.g. -> I have three different objects and the value of property "source" is needed:
first_data has that property in list.details.source
second_data has that property in list.details.products[0]._new.source
third_data does not have this property, therefore it should return false
So how can I return the value of the specific property with consideration, that it can be on any position in object?
var first_data = {
area: "South",
code: "S265",
info: {
category: "enhanced",
label: "AB | 27AS53",
variable: "VR"
},
list: {
area: "Mid",
details: [
{
source: "Spain",
totals: 12,
products: [
{
name: "ABC",
brand: "Nobrand",
id: "111",
category: "Men",
}
]
}
]
},
time: 1654775446138
};
var second_data = {
area: "South",
code: "S265",
info: {
category: "enhanced",
label: "AB | 27AS53",
variable: "VR"
},
list: {
area: "Mid",
details: [
{
products: [
{
name: "ABC",
brand: "Nobrand",
id: "111",
category: "Men",
_new: {
source: "Spain",
totals: 12
}
}
]
}
]
},
time: 1654775446138
};
var third_data = {
area: "South",
code: "S265",
info: {
category: "enhanced",
label: "AB | 27AS53",
variable: "VR"
},
list: {
area: "Mid",
details: [
{
products: [
{
name: "ABC",
brand: "Nobrand",
id: "111",
category: "Men"
}
]
}
]
},
time: 1654775446138
};
I first tried to solve it with ES6, so that I can rewrite it in a second step into ES5. Here is what I have so far. The first problem is that here I am getting a false, but the property exists.
var propertyExists = function (obj, key) {
if(obj === null || obj === undefined) {
return false;
}
for(const k of Object.keys(obj)) {
if(k === key) {
return obj[k]
}
else {
const val = obj[k];
if(typeof val === 'object') {
if(propertyExists(val, key) === true) {
return true;
}
}
}
}
return false;
}
propertyExists(first_data, 'source')

Your propertyExists function didn't work because it returned the value of source but it later checked if the value is equal to true (as described by Felix Kling in a comment above).
Here's my implementation (originally in ES6 but I used a typescript compiler with target set to ES5):
var findProp = function (obj, prop) {
if (typeof obj != "object") {
return false;
}
if (obj.hasOwnProperty(prop)) {
return obj[prop];
}
for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {
var p = _a[_i];
if (typeof obj[p] === "object") {
var t = findProp(obj[p], prop);
if (t) {
return t;
}
}
}
return false;
};
Note: It might be faster to detect which object structure it is and retrieve the value because you would then know where it is.

Convert object to array of prorperties

I need to convert object:
{
middleName: null,
name: "Test Name",
university: {
country: {
code: "PL"
},
isGraduated: true,
speciality: "Computer Science"
}
}
to array:
[{
key: "name",
propertyValue: "Test Name",
},
{
key: "middleName",
propertyValue: null,
},
{
key: "university.isGraduated",
propertyValue: true,
},
{
key: "university.speciality",
propertyValue: "Computer Science",
},
{
key: "university.country.code",
propertyValue: "PL"
}];
I wrote algorithm, but it's pretty dummy, how can I improve it? Important, if object has nested object than I need to write nested object via dot (e.g university.contry: "value")
let arr = [];
Object.keys(parsedObj).map((key) => {
if (parsedObj[key] instanceof Object) {
Object.keys(parsedObj[key]).map((keyNested) => {
if (parsedObj[key][keyNested] instanceof Object) {
Object.keys(parsedObj[key][keyNested]).map((keyNestedNested) => {
arr.push({ 'key': key + '.' + keyNested + '.' + keyNestedNested, 'propertyValue': parsedObj[key][keyNested][keyNestedNested] })
})
} else {
arr.push({ 'key': key + '.' + keyNested, 'propertyValue': parsedObj[key][keyNested] })
}
})
} else {
arr.push({ 'key': key, 'propertyValue': parsedObj[key] })
}
});
Thanks

A recursive function implementation.
I have considered that your object consist of only string and object as the values. If you have more kind of data types as your values, you may have to develop on top of this function.
const myObj = {
middleName: null,
name: "Test Name",
university: {
country: {
code: "PL"
},
isGraduated: true,
speciality: "Computer Science"
}
}
const myArr = [];
function convertObjectToArray(obj, keyPrepender) {
Object.entries(obj).forEach(([key, propertyValue]) => {
if (typeof propertyValue === "object" && propertyValue) {
const updatedKey = keyPrepender ? `${keyPrepender}.${key}` : key;
convertObjectToArray(propertyValue, updatedKey)
} else {
myArr.push({
key: keyPrepender ? `${keyPrepender}.${key}` : key,
propertyValue
})
}
})
}
convertObjectToArray(myObj);
console.log(myArr);

I'd probably take a recursive approach, and I'd probably avoid unnecessary intermediary arrays (though unless the original object is massive, it doesn't matter). For instance (see comments):
function convert(obj, target = [], prefix = "") {
// Loop through the object keys
for (const key in obj) {
// Only handle "own" properties
if (Object.hasOwn(obj, key)) {
const value = obj[key];
// Get the full key for this property, including prefix
const fullKey = prefix ? prefix + "." + key : key;
if (value && typeof value === "object") {
// It's an object...
if (Array.isArray(value)) {
throw new Error(`Arrays are not valid`);
} else {
// ...recurse, providing the key as the prefix
convert(value, target, fullKey);
}
} else {
// Not an object, push it to the array
target.push({key: fullKey, propertyValue: value});
}
}
}
// Return the result
return target;
}
Live Example:
const original = {
middleName: null,
name: "Test Name",
university: {
country: {
code: "PL"
},
isGraduated: true,
speciality: "Computer Science"
}
};
function convert(obj, target = [], prefix = "") {
// Loop through the object keys
for (const key in obj) {
// Only handle "own" properties
if (Object.hasOwn(obj, key)) {
const value = obj[key];
// Get the full key for this property, including prefix
const fullKey = prefix ? prefix + "." + key : key;
if (value && typeof value === "object") {
// It's an object...
if (Array.isArray(value)) {
throw new Error(`Arrays are not valid`);
} else {
// ...recurse, providing the key as the prefix
convert(value, target, fullKey);
}
} else {
// Not an object, push it to the array
target.push({key: fullKey, propertyValue: value});
}
}
}
// Return the result
return target;
}
const result = convert(original, []);
console.log(result);
.as-console-wrapper {
max-height: 100% !important;
}
Note that I've assumed the order of the array entries isn't significant. The output you said you wanted is at odds with the standard order of JavaScript object properties (yes, they have an order now; no, it's not something I suggest relying on 😀). I've gone ahead and not worried about the order within an object.

This is the most bulletproof I could do :D, without needing a global variable, you just take it, and us it wherever you want!
const test = {
middleName: null,
name: "Test Name",
university: {
country: {
code: "PL"
},
isGraduated: true,
speciality: "Computer Science"
}
};
function toPropertiesByPath(inputObj) {
let arr = [];
let initialObj = {};
const getKeys = (obj, parentK='') => {
initialObj = arr.length === 0 ? obj: initialObj;
const entries = Object.entries(obj);
for(let i=0; i<entries.length; i++) {
const key = entries[i][0];
const val = entries[i][1];
const isRootElement = initialObj.hasOwnProperty(key);
parentK = isRootElement ? key: parentK+'.'+key;
if(typeof val === 'object' && val!==null && !Array.isArray(val)){
getKeys(val, parentK);
} else {
arr.push({ key: parentK, property: val });
}
}
};
getKeys(inputObj);
return arr;
}
console.log(toPropertiesByPath(test));

I wrote a small version using recursive function and another for validation is an object.
let values = {
middleName: null,
name: "Test Name",
university: {
country: {
code: "PL"
},
isGraduated: true,
speciality: "Computer Science"
}
}
function isObject(obj) {
return obj != null && obj.constructor.name === "Object"
}
function getValues(values) {
let arrValues = Object.keys(values).map(
v => {
return { key: v, value: isObject(values[v]) ? getValues(values[v]) : values[v] };
});
console.log(arrValues);
}
getValues(values);

Remove empty string field from a object contain nested object and array?

I have ask another question, but someone close that question. I really need this answer. That's why I asking another question.
I have a object like following. I have to remove that empty string filed from nested object and also from nested array. How can I remove that.
const obj = {
name: 'Red Boy',
price: '350',
originalPrice: '', // Empty string field
stock: 20,
category: {
name: '', // Empty String field
subCategory: { name: ''} // Empty String filed
},
weight: '90kg',
dimensions: {
width: '50cm',
height: '', // Empty string filed
length: '70cm'
},
suitable: [
{ name: 'Yoga' },
{ name: '' }, // Empty String filed
{ name: 'Winter' }
],
additionalInfo: [
{ field: 'closure', value: 'Button' },
{ field: 'collar', value: ''} // Empty String Field
]
}
In this hybrid object type you can see some sub-object and also some sub-array. You can also see some field that are not contain any value.(I comment out that filed).
Actually I need to remove that filed. How can I remove that empty string field from above hybrid object type.
Thank you..
My Expected result-
{
name: 'Red Boy',
price: '350',
// Removed
stock: 20,
category: {
name: '', // Empty String field
// Removed
},
weight: '90kg',
dimensions: {
width: '50cm',
// Removed
length: '70cm'
},
suitable: [
{ name: 'Yoga' },
//Removed
{ name: 'Winter' }
],
additionalInfo: [
{ field: 'closure', value: 'Button' },
{ field: 'collar', //Removed }
// Here If this two filed is empty then should remove the whole object
{ field: '', value: '' }
// Then should remove whole '{ field: '', value: '' }'
]
}

To achieve this, we need to implement a recursive function to remove all empty string in all nested arrays and objects.
function rec(obj){
for(let key of Object.keys(obj)){
if (obj[key] === ''){
delete obj[key];
}
else if (typeof obj[key] === 'object'){
obj[key] = rec(obj[key]);
if (Object.keys(obj[key]).length === 0 ) delete obj[key];
}
}
return Array.isArray(obj) ? obj.filter(val => val) : obj;
}
Also, please note that it's not purely hybrid. Because Array is special type of Object.

const obj = {
name: 'Red Boy',
price: '350',
originalPrice: '', // Empty string field
stock: 20,
category: {
name: '', // Empty String field
subCategory: { name: ''} // Empty String filed
},
weight: '90kg',
dimensions: {
width: '50cm',
height: '', // Empty string filed
length: '70cm'
},
suitable: [
{ name: 'Yoga' },
{ name: '' }, // Empty String filed
{ name: 'Winter' }
],
additionalInfo: [
{ field: 'closure', value: 'Button' },
{ field: 'collar', value: ''} // Empty String Field
]
}
function removeEmptyString(object) {
Object
.entries(object)
.forEach(([key, value]) => {
if (value && typeof value === 'object')
removeEmptyString(value);
if (value &&
typeof value === 'object' &&
!Object.keys(value).length ||
value === null ||
value === undefined ||
value.length === 0
) {
if (Array.isArray(object))
object.splice(key, 1);
else
delete object[key];
}
});
return object;
}
console.log(removeEmptyString(obj))

I have used recursion to filter out the empty string, empty object or empty array present deep inside the nested structure.
This function also removes such objects and their nested objects with no properties.
Note: It will also work if the provided initial value is any other thing then object like array or string
var obj={name:"Red Boy",price:"350",originalPrice:"",stock:20,category:{name:"",subCategory:{name:""}},weight:"90kg",dimensions:{width:"50cm",height:"",length:"70cm"},suitable:[{name:"Yoga"},{name:""},{name:"Winter"}],additionalInfo:[{field:"closure",value:"Button"},{field:"collar",value:""}]};
function filt(a) {
if (typeof a === 'string') return a !== '';
//if it is a string, then it must not be empty
else if (Array.isArray(a)) return a.length !== 0
//if it an arra, then it must have some item
else if (a instanceof Object) return Object.keys(a).length !== 0;
//if it is an object, then it must have some property
return a !== null && a !== undefined
//else it must not be null or undefined
}
function rec(obj) {
if (Array.isArray(obj)) {
//if an value is an array
return obj.map((a) => rec(a)).filter((a) => filt(a)) //recurse the child first of each value in the array
//then filter out the value which are either null, empty, undefined or have length 0
} else if (obj instanceof Object) {
//if value is an object
var d = Object.entries(obj).map((a) => ([a[0], rec(a[1])])).filter((a) => filt(a[1]));
//map through the object.entries and reassign the values to the keys by recurssing over the value to filter out the nested inside irrelevant value
return Object.fromEntries(d)
//convert the map into object and return
} else if (typeof obj === 'string') return obj !== '' ? obj : null
//f it is a string, it must not be empty else return null
return obj !== null && obj !== undefined ? obj : null
//else it must not be null or undefined
}
console.log("For object",rec(obj))
console.log("For Array",rec([{
name: "Yoga"
}, {
name: ""
}, {
name: "Winter"
}]))

Here's an immutable way to remove non-empty values from an object, with the added capability of normalising object's inside of arrays:
const normaliseObject = (obj) =>
Object.fromEntries(
Object.entries(obj)
.filter(([_, value]) => value !== '' && value !== null)
.map(([key, value]) => (typeof value === 'object' ? [key, normalise(value)] : [key, value])),
)
// If an element in an array is an object, normalise that too
const normaliseArray = (arr) => arr.map(value => (typeof value === 'object' ? normalise(value) : value))
/**
* Normalise any object to remove keys whose values are falsey
* #param obj Object to be normalised
* #returns Normalised object where falsey values are removed
*/
const normalise = (obj) => {
return Array.isArray(obj) ? normaliseArray(obj) : normaliseObject(obj)
}

Angular custom Filter pipe after KeyValue pipe

I'm trying to implement a custom filter after using Angular's inbuilt Key Value pipe
I have an array with values for example
object= [
{ key: "Added_By", value: "Yi" },
{ key: "Assigned_To", value: "-" },
{ key: "Bought_Date", value: 43810 },
{ key: "Brand", value: "Samsung PM863" },
{ key: "Capacity", value: 3.84 },
]
I want to filter based on multiple incoming values but incoming values vary for example
It Could be 1 key/Value
Filter= [{ key: "Added_By", value: "Yi" }]// Return Object
or multiple
Filter= [{ key: "Added_By", value: "Yi" }, { key: "Bought_Date", value: 43810 }] //both matches return object
Filter= [{ key: "Added_By", value: "ABC" }, { key: "Bought_Date", value: 43810 }] //1 match but 1 doesn't return false
I want to return object if all the conditions are met
For a single key/value I tried
let Key= Filter[0].key
let Value=Filter[0].value
let KeyFilter = object.filter(x => x.key === Key)
if (KeyFilter[0].value.toString().toLowerCase().indexOf(Value.toLowerCase()) !== -1)
return items
But this approach only works only when 1 object is present in filter array

I've created a function that accepts an array of objects, and an object with key: value pairs.
The keys of objects in the array must match with object keys to work.
I always use it when I need to filter an array based on various conditions.
export const filterArray = (filterData, toBeFiltered) => {
return toBeFiltered.filter(item => {
for (const key in filterData) {
if (item[key] === null || item[key] === undefined) {
return false;
} else {
if (typeof filterData[key] === 'string') {
if (!(item[key]).toLowerCase().includes((filterData[key].trim()).toLowerCase())) {
return false;
}
} else if (item[key] !== filterData[key]) {
return false;
}
}
}
return true;
});
};
Hope it helps.

Find and update in nested json object

I used this code to find the required portion from the json object from sJhonny's Question
Data Sample
TestObj = {
"Categories": [{
"Products": [{
"id": "a01",
"name": "Pine",
"description": "Short description of pine."
},
{
"id": "a02",
"name": "Birch",
"description": "Short description of birch."
},
{
"id": "a03",
"name": "Poplar",
"description": "Short description of poplar."
}],
"id": "A",
"title": "Cheap",
"description": "Short description of category A."
},
{
"Product": [{
"id": "b01",
"name": "Maple",
"description": "Short description of maple."
},
{
"id": "b02",
"name": "Oak",
"description": "Short description of oak."
},
{
"id": "b03",
"name": "Bamboo",
"description": "Short description of bamboo."
}],
"id": "B",
"title": "Moderate",
"description": "Short description of category B."
}]
};
Function to find
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
Use like so:
getObjects(TestObj, 'id', 'A'); // Returns an array of matching objects
This code is to select matching piece from the source. But what I want is to update the source object with new value and retrieve the updated source object.
I want something like
getObjects(TestObj, 'id', 'A', 'B'); // Returns source with updated value. (ie id:'A' updated to id:'B' in the returned object)
My code
function getObjects(obj, key, val, newVal) {
var newValue = newVal;
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
obj[key] = 'qwe';
}
}
return obj;
}
This works if i give obj[key] = 'qwe'; but if i change the code into obj[key] = newValue; its updated as undefined.
Why is that so?

You forgot to pass newValue in the nested call
function getObjects(obj, key, val, newVal) {
var newValue = newVal;
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val, newValue));
} else if (i == key && obj[key] == val) {
obj[key] = 'qwe';
}
}
return obj;
}

This ?
function update(obj, key, newVal) {
for(var i in obj) {
if(typeof obj[i] == 'object') {
update(obj[i], key, newVal));
} else if(i === key) {
obj[i] = newVal;
}
}
return obj;
}

function getObjects(obj, key, val, newVal) {
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (i == key && obj[key] == val) {
obj[key] = newVal;
}
}
return obj
}
This will do the inplace update of a found value with the newValue (newVal)

you can try my solution
const InsertOrUpdate = (dest, src) => {
GetValue(dest, src, [])
}
const GetValue = (dest, src, keys) => {
for (let key in src) {
let srcValue = src[key]
// Don't use push here
// The concat() method does not change the existing arrays, but returns a new array, containing the values of the joined arrays
let parentKeys = keys.concat(key)
if (typeof (srcValue) === 'object') {
GetValue(dest, srcValue, parentKeys)
} else {
SetValue(dest, parentKeys, srcValue)
}
}
}
const SetValue = (dest, keys, value) => {
if (!keys.length || keys.length === 0) {
return
}
let key = keys[0]
let childKeys = keys.slice(1)
// update
// note: null is object
if (dest[key] && typeof (dest[key]) === 'object') {
SetValue(dest[key], childKeys, value)
} else {
// insert
if (childKeys.length === 0) {
dest[key] = value
} else {
// insert parent key & continue update
dest[key] = {}
SetValue(dest[key], childKeys, value)
}
}
}

I tried using the selected solution above, but it would update every row with the same value. So I added a way to define what record you want to update, and also a way to keep track of the current record ID once you've already looped past it.
function getObjects(obj, rowId, key, val, newVal, rId) {
var objects = [];
for (var i in obj) {
if(obj[i].id !== undefined) rId = obj[i].id;
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(this.updateObject(obj[i], rowId, key, val, newVal, rId));
} else if (i == key && obj[key] == val) {
if(rId == rowId) obj[key] = newVal;
}
}
return obj;
}

Take a look at object-scan. We use it for a lot of data processing now. For us it makes the code much more maintainable, just takes a moment to wrap your head around it. Here is how you could answer your question
// const objectScan = require('object-scan');
const update = (data, needle, from, to) => objectScan([needle], {
abort: true,
rtn: 'bool',
filterFn: ({ value, parent, property }) => {
if (value === from) {
parent[property] = to;
return true;
}
return false;
}
})(data);
// -------------------------------
const TestObj = { Categories: [{ Products: [{ id: 'a01', name: 'Pine', description: 'Short description of pine.' }, { id: 'a02', name: 'Birch', description: 'Short description of birch.' }, { id: 'a03', name: 'Poplar', description: 'Short description of poplar.' }], id: 'A', title: 'Cheap', description: 'Short description of category A.' }, { Product: [{ id: 'b01', name: 'Maple', description: 'Short description of maple.' }, { id: 'b02', name: 'Oak', description: 'Short description of oak.' }, { id: 'b03', name: 'Bamboo', description: 'Short description of bamboo.' }], id: 'B', title: 'Moderate', description: 'Short description of category B.' }] };
console.log(update(TestObj, '**.id', 'A', 'B'));
// => true
console.log(TestObj);
// => { Categories: [ { Products: [ { id: 'a01', name: 'Pine', description: 'Short description of pine.' }, { id: 'a02', name: 'Birch', description: 'Short description of birch.' }, { id: 'a03', name: 'Poplar', description: 'Short description of poplar.' } ], id: 'B', title: 'Cheap', description: 'Short description of category A.' }, { Product: [ { id: 'b01', name: 'Maple', description: 'Short description of maple.' }, { id: 'b02', name: 'Oak', description: 'Short description of oak.' }, { id: 'b03', name: 'Bamboo', description: 'Short description of bamboo.' } ], id: 'B', title: 'Moderate', description: 'Short description of category B.' } ] }
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan#13.8.0"></script>
Disclaimer: I'm the author of object-scan