I made a FIDDLE for you. I am storing a stack string and then output it, if the property is of primitive type:
function iterate(obj, stack) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property], stack + '.' + property);
} else {
console.log(property + " " + obj[property]);
$('#output').append($("<div/>").text(stack + '.' + property))
}
}
}
}
iterate(object, '')
Update: 17/01/2019
There used to be a different implementation, but it didn't work. See this answer for a prettier solution
Answer from Artyom Neustroev on Stack OverflowI made a FIDDLE for you. I am storing a stack string and then output it, if the property is of primitive type:
function iterate(obj, stack) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property], stack + '.' + property);
} else {
console.log(property + " " + obj[property]);
$('#output').append($("<div/>").text(stack + '.' + property))
}
}
}
}
iterate(object, '')
Update: 17/01/2019
There used to be a different implementation, but it didn't work. See this answer for a prettier solution
The solution from Artyom Neustroev does not work on complex objects, so here is a working solution based on his idea:
function propertiesToArray(obj) {
const isObject = val =>
val && typeof val === 'object' && !Array.isArray(val);
const addDelimiter = (a, b) =>
a ? `
{b}` : b;
const paths = (obj = {}, head = '') => {
return Object.entries(obj)
.reduce((product, [key, value]) =>
{
let fullPath = addDelimiter(head, key)
return isObject(value) ?
product.concat(paths(value, fullPath))
: product.concat(fullPath)
}, []);
}
return paths(obj);
}
const foo = {foo: {bar: {baz: undefined}, fub: 'goz', bag: {zar: {zaz: null}, raz: 3}}}
const result = propertiesToArray(foo)
console.log(result)
EDIT (2023/05/23):
4 different (complete) solutions with full descriptions are available on LeetCode: https://leetcode.com/problems/array-of-objects-to-matrix/editorial/?utm_campaign=PostD19&utm_medium=Post&utm_source=Post&gio_link_id=EoZk0Zy9
javascript - looping through an object (tree) recursively - Stack Overflow
javascript recursive through an object - Stack Overflow
RecursionError: Maximum Recursion Depth Exceeded
What is happening when I call JSON and JSON.stringify in the console?
When should I use recursion instead of loops?
What is a stack overflow in recursion?
What is tail recursion?
Videos
You're looking for the for...in loop:
for (var key in foo)
{
if (key == "child")
// do something...
}
Be aware that for...in loops will iterate over any enumerable properties, including those that are added to the prototype of an object. To avoid acting on these properties, you can use the hasOwnProperty method to check to see if the property belongs only to that object:
for (var key in foo)
{
if (!foo.hasOwnProperty(key))
continue; // skip this property
if (key == "child")
// do something...
}
Performing the loop recursively can be as simple as writing a recursive function:
// This function handles arrays and objects
function eachRecursive(obj)
{
for (var k in obj)
{
if (typeof obj[k] == "object" && obj[k] !== null)
eachRecursive(obj[k]);
else
// do something...
}
}
You can have an Object loop recursive function with a property execute function propExec built within it.
function loopThroughObjRecurs (obj, propExec) {
for (var k in obj) {
if (typeof obj[k] === 'object' && obj[k] !== null) {
loopThroughObjRecurs(obj[k], propExec)
} else if (obj.hasOwnProperty(k)) {
propExec(k, obj[k])
}
}
}
Test here:
// I use the foo object of the OP
var foo = {
bar:'a',
child:{
b: 'b',
grand:{
greatgrand: {
c:'c'
}
}
}
}
function loopThroughObjRecurs (obj, propExec) {
for (var k in obj) {
if (typeof obj[k] === 'object' && obj[k] !== null) {
loopThroughObjRecurs(obj[k], propExec)
} else if (obj.hasOwnProperty(k)) {
propExec(k, obj[k])
}
}
}
// then apply to each property the task you want, in this case just console
loopThroughObjRecurs(foo, function(k, prop) {
console.log(k + ': ' + prop)
})