Find total grandchildren in object and iterate over them?

Question

I have the below object in javascript.

I need to find;

The total amount of "prop3" children - in the below example that would be 7.
Find the first prop3 child, and then iterate over them, until I get to the last one (used in a step-form thingy)

Any ideas?

{
    "d399ca811f45": {
        "prop1": "d399ca811f45",
        "prop2": {},
        "prop3": {
            "1d2097764d06": {
                "header": "value",
                "subprop1": "1d2097764d06"
            }
        }
    },
    "6d0cb4c7748b": {
        "prop1": "6d0cb4c7748b",
        "prop3": {
            "3a29208f0015": {
                "header": "value",
                "subprop1": "3a29208f0015"
            },
            "e8eb0f1b339b": {
                "header": "value",
                "subprop1": "3a29208f0015"
            },
            "05d43aaf7ef7": {
                "header": "value",
                "subprop1": "3a29208f0015"
            }
        }
    },
    "39feecfa5498": {
        "prop1": "39feecfa5498",
        "prop2": {},
        "prop3": {
            "57a07392b86e": {
                "header": "value",
                "subprop1": "3a29208f0015"
            },
            "fd84d411a823": {
                "header": "value",
                "subprop1": "3a29208f0015"
            },
            "75ff469329ab": {
                "header": "value",
                "subprop1": "3a29208f0015"
            }
        }
    }
}

@mplungjan vue tag removed, that was a mistake. But the answer you linked to, does not answer the question. I know how to access a value of an object - but my question, as staed, is how to i get the total amount of grand children (not children), in my example, over multiple children? So not just grandchildren on one child, but the total grandchildren of multiple children. — brother, Nov 03 '19 at 09:58
https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json — mplungjan, Nov 03 '19 at 10:01
https://stackoverflow.com/questions/8312459/iterate-through-object-properties — mplungjan, Nov 03 '19 at 11:26

score 1 · Answer 1 · edited Nov 03 '19 at 11:16

The concept you are looking for is called "looping through objects". Once you understand this concept you can combine different loops to generate the dataset you are looking for.

You can use for...in loops to iterate over your original data structure. One loop for the top-level objects and another loop for the prop3 object. However, you can also use the Object.values() helper to convert the object to an array and use all the iteration tools available to arrays in JS like forEach and reduce.

Consider the following solution converting the object collections to arrays:

 var data = { "d399ca811f45": { "prop1": "d399ca811f45", "prop2": {}, "prop3": { "1d2097764d06": { "header": "value", "subprop1": "1d2097764d06" } } }, "6d0cb4c7748b": { "prop1": "6d0cb4c7748b", "prop3": { "3a29208f0015": { "header": "value", "subprop1": "3a29208f0015" }, "e8eb0f1b339b": { "header": "value", "subprop1": "3a29208f0015" }, "05d43aaf7ef7": { "header": "value", "subprop1": "3a29208f0015" } } }, "39feecfa5498": { "prop1": "39feecfa5498", "prop2": {}, "prop3": { "57a07392b86e": { "header": "value", "subprop1": "3a29208f0015" }, "fd84d411a823": { "header": "value", "subprop1": "3a29208f0015" }, "75ff469329ab": { "header": "value", "subprop1": "3a29208f0015" } } } }

// Convert the 'data' into an array and reduce all items to 
// construct a new array with only prop3 items
var prop3List = Object.values(data).reduce(function(list, item) {
  // Add the prop3 items to the collection
  return list.concat(Object.values(item.prop3));
}, []);

console.log('Prop3 Total ', prop3List.length);
console.log('First item', prop3List[0])

// Loop through all items
prop3List.forEach(function(item){
  // item.header
  // item.subprop1
  console.log(item.header, item.subprop1)
})

score 1 · Answer 2 · edited Nov 03 '19 at 11:52

You can use this function for your current requirement.

const propGetter = (data, keyName) => {
  let propArray = []
  Object.keys(data).forEach(rootKey => {
    Object.keys(data[rootKey]).forEach(key => {
      if (key === keyName) {
        Object.keys(data[[rootKey]][[key]]).forEach(subKey => {
          propArray.push({ [subKey]: data[[rootKey]][[key]][[subKey]] })
        })
      }
    })
  })
  return propArray
}


const data = { "d399ca811f45": { "prop1": "d399ca811f45", "prop2": {}, "prop3": { "1d2097764d06": { "header": "value", "subprop1": "1d2097764d06" } } }, "6d0cb4c7748b": { "prop1": "6d0cb4c7748b", "prop3": { "3a29208f0015": { "header": "value", "subprop1": "3a29208f0015" }, "e8eb0f1b339b": { "header": "value", "subprop1": "3a29208f0015" }, "05d43aaf7ef7": { "header": "value", "subprop1": "3a29208f0015" } } }, "39feecfa5498": { "prop1": "39feecfa5498", "prop2": {}, "prop3": { "57a07392b86e": { "header": "value", "subprop1": "3a29208f0015" }, "fd84d411a823": { "header": "value", "subprop1": "3a29208f0015" }, "75ff469329ab": { "header": "value", "subprop1": "3a29208f0015" } } } }


console.log(propGetter(data, 'prop3'));

this will return you all values of prop3

note: this is only for current example if you want to get values based on only key name from any level of object then some changes need to be done

I made and fixed a snippet for you – mplungjan Nov 03 '19 at 11:52 — mplungjan, Nov 03 '19 at 11:52

Find total grandchildren in object and iterate over them?

2 Answers2