Detect if an Object has children in JavaScript

Question

In JavaScript you can get the children of an XML node like this...

var children = xml.childeNodes;

How do I get the children of an object?

var obj = {
  prop1: 'stuff',
  prop2: 'things',
  prop3: 'stuff-n-things'
}

Round two

Given an object like so..

var Obj = {
  levelOneProp1: 'stuff',
  levelOneProp2: 'things',
  levelOneProp3: {
     levelTwoProp1: 'moreStuff',
     levelTwoProp2: 'morethings',
     levelTwoProp3: 'morestuff-n-things'
  } 
}

I would like to know which properties in Obj have children so I can loop through them in a recursive manner. The goal is to be able to supply a dataset with an (theoretically) unlimited number of children and apply their values to input elements... Here is what I have so far.

function applyData( dataSet ){
    var hasChildren = false;

    for(var i = 0; i < dataSet.childNodeArrayGoesHere.length; i++){
        if(dataSet.detectChildNodesHere){
            hasChildren = true;
        }
    }

    if(hasChildren){
        for(var j = 0; j < dataSet.childNodeArrayGoesHere.length; i++){
            applyData(dataSet[j]);
        }
    } else {
        //apply the key/value pair to an input element

        $("input[name" + dataSet.propertyName + "]").val(dataSet.propertyValue);
    }
}

Please refrain from drastically changing the context of a question. When you do this, you're rendering some of the existing answers useless. Try creating another question instead. — Ates Goral, May 04 '11 at 17:54
@ates - i kindof understand where u are going with this but the question was just clarified IMO. I still just need the collection of "child nodes" to complete my function. — Derek Adair, May 04 '11 at 17:57
I just need to detect if a property is an "end node" essentially... sorry for the ambiguity. — Derek Adair, May 04 '11 at 18:00

Pedro S Cord · Answer 1 · 2016-02-11T19:48:23.357

You can iterate over all properties of an object recursively like this.

Find all the end nodes, select the corresponding input tags by the name and put the value in it.

I used an object with just two levels, but it can be used with an object of n levels.

var Obj = {
          id1: 'stuff',
          id2: 'things',
          id3: {
              levelTwo1: 'moreStuff',
              levelTwo2: 'morethings',
              levelTwo3: 'morestuff-n-things'
          }
      }

function addAttributeInput(obj) {
    for (var o in obj) {
        if (typeof obj[o] == "object") {
            addAttributeInput(obj[o]);
        } else {
            $("input[name='" + o + "']").val(obj[o]);
        }
    }
}

addAttributeInput(Obj);

score 7 · Answer 2 · answered May 04 '11 at 17:47

7

You can iterate over all properties of an object like this:

var o = { prop1: 'this is prop 1', prop2: 'this is prop2'};

for(var propName in o) {
    if(o.hasOwnProperty(propName)) {
        alert(o[propName]);   
    }
}

The hasOwnProperty() function checks to make sure that the specified property actually exists in the object. Using it in this context makes sure you don't get any inherited properties.

answered May 04 '11 at 17:47

Mark Biek

146,731
54
156
201

The `for(var i in o)` loop does work to iterate through the entirety of the object, but if you read my edits see that I am... essentially... trying to detect if something is an `End Node` or not in order to apply it to an input field – Derek Adair May 04 '11 at 18:01
This does not read the child elements if present. I do not have an answer yet to add any other suggestions. – KeyOfJ Apr 17 '14 at 16:43

score 3 · Answer 3 · answered Mar 12 '22 at 06:17

3

This code detect whether obj has any child

Object.keys(obj).length

answered Mar 12 '22 at 06:17

Roohi Ali

628
6
7

This seem to be the only answer that addresses the specific question. – Danny Acosta May 20 '22 at 16:09
The only relevant answer of all the answers on this page. Thanks. – Srijan Jan 31 '23 at 11:34

score 0 · Answer 4 · answered May 04 '11 at 17:36

0

Those are not children, You have created an associative array.

Access them like this:

obj[prop1]

answered May 04 '11 at 17:36

Porco

4,163
3
22
25

Technically, Javascript doesn't have associative arrays at all. Just regular arrays and objects. – Mark Biek May 04 '11 at 17:50
True, in this case it's an object that is being used as an associative array. – Porco May 04 '11 at 19:30

ezmilhouse · Answer 5 · 2011-05-04T18:01:41.860

-3

What you're looking for are actually object keys. You can check if a object key exists by calling it:

your obj:

var obj = {
    prop1: 1,
    prop2: 2
}

check if undefined:

if (obj.prop3 === undefined) {
    alert('obj key does not exist');
} else {
    alert(obj.prop3);
}

or

if (obj["prop3"] === undefined) {
    alert('obj key does not exist');
} else {
    alert(obj["prop3"]);
}

or if you face a use case where a obj key's value might be set to undefined manually:

if (obj.hasOwnProperty("prop3")) {
    alert(obj["prop3"])
} else {
    alert('obj key does not exist');
}

edited May 04 '11 at 18:01

answered May 04 '11 at 17:44

ezmilhouse

8,933
7
29
38

1

`obj.key3 === undefined` is not a good way to check for existence of properties: http://stackoverflow.com/questions/1098040/checking-if-an-associative-array-key-exists-in-javascript/1098955#1098955 – Ates Goral May 04 '11 at 17:47
i think that manually setting a obj key's value to undefined is far away from best practice – ezmilhouse May 04 '11 at 17:49
2

There are at least 16 people who disagree with you (see the comments to my answer). There are very real use cases where a property can be set to `undefined`. The property can also be set to `null`, in which case comparison to `undefined` will yield a match. – Ates Goral May 04 '11 at 17:53

Detect if an Object has children in JavaScript

Round two

5 Answers5