How to get json object and nested object Property names and values in AngularJs?

Question

I have a json object like this

{
  "from": {
    "required": false,
    "type": {
      "name": {
        "required": false,
        "type": "String"
      },
      "email": {
        "required": true,
        "type": "String"
      }
    }
  },
  "to": {
    "required": true,
    "type": [
      {
        "name": {
          "required": false,
          "type": "String"
        },
        "email": {
          "required": true,
          "type": "String"
        }
      }
    ]
  },
  "subject": {
    "required": true,
    "type": "String"
  },
  "text": {
    "required": true,
    "type": "String"
  },
  "html": {
    "required": true,
    "type": "String"
  }
}

The object contains nested objects, having properties getting set from various services. So, property names are dynamically changed. I want to get property names and respective values. I'd already tried out the following code.

 for (var prop in data) {
                $scope.fieldsInfo.push({ "label": prop, "required":data.hasOwnProperty(prop) });
            }

In the above code iam getting property name (from) and required value also , now i want to get nested object property names ( name,email) and also (required,type) values inside the name object. In the above object from contains type is a object so isArray:false and next object to contains type is a array so isArray:true remaining objects type is a string so isArray:false. Output like this

$scope.fieldsInfo=[];

  $scope.fieldsInfo=[
                      { 
                       "label"    :"from",
                       "required" :false,
                       "isArray"  :false,
                       "type"     : [
                                      {
                                        "label"   :"name",
                                        "type"    : "String",
                                        "required": false
                                      }
                                      {
                                        "label"   : "email",
                                        "type"    : "String",
                                        "required": true 
                                      }                     
                                    ]
                      },
                      { 
                       "label"    :"to",
                       "required" :true,
                       "isArray"  :true,
                       "type"     : [
                                      {
                                        "label"   : "name",
                                        "type"    : "String",
                                        "required": false
                                      }
                                      {
                                        "label"   : "email",
                                        "type"    : "String",
                                        "required": true 
                                      }                       
                                    ]
                      },
                      { 
                       "label"    :"subject",
                       "required" :true,
                       "isArray"  :false,
                       "type"     :"String" 
                      },
                      { 
                       "label"    :"text",
                       "required" :true,
                       "isArray"  :false,
                       "type"     :"String" 
                      },
                      { 
                       "label"    :"html",
                       "required" :true,
                       "isArray"  :false,
                       "type"     :"String" 
                      }
                    ]

wayneOS · Accepted Answer · 2016-03-21 03:17:25Z

I'm not really sure what you want to achive, but based on the title of your question, i will provide some basics for handling javascript objects/arrays:

Iterating over the keys with for (var prop in data) {} (like you did) doesn't work for nested objectes. One possible approach would be to use a recursive function:

function get_keys_recursive (object_or_array) {

    for (var key in object)
        if (object[key] != null) //null is also a object
            if (typeof object[key] === 'object') 
                get_keys_recursive (typeof object[key]); //recursive function call
            else {

                console.log (key); //here you get all keys
                console.log (object[key]); //here you get the value 

            }

}

get_keys_recursive (your_object); //function call

Should that not answer your question please provide more detailed information.

durga siva kishore mopuru · Accepted Answer · 2016-03-21 09:09:23Z

$scope.fieldsInfo = [];
            $scope.type = [];
            for (var prop in data) {
                var isArray = angular.isArray(data[prop].type);
                var isObject = angular.isObject(data[prop].type);
                if (isArray) {
                    for (var nestedProp in data[prop].type[0]) {
                        $scope.type.push({ "label": nestedProp, "required": result.data.hasOwnProperty(nestedProp), "type": data[prop].type[0][nestedProp].type });
                    }
                    $scope.fieldsInfo.push({ "label": prop, "required": result.data.hasOwnProperty(prop), "isArray": isArray, "type": $scope.type });
                    $scope.type = [];
                }
                else
                    if (isObject) {
                        for (var nestedProp in data[prop].type) {
                            $scope.type.push({ "label": nestedProp, "required": data.hasOwnProperty(nestedProp), "type": data[prop].type[nestedProp].type });
                        }
                        $scope.fieldsInfo.push({ "label": prop, "required": result.data.hasOwnProperty(prop), "isArray": isArray, "type": $scope.type });
                        $scope.type = [];
                    }
                else {
                    $scope.fieldsInfo.push({ "label": prop, "required": data.hasOwnProperty(prop), "isArray": isArray, "type": data[prop].type });
                }
            }

Collectives™ on Stack Overflow

How to get json object and nested object Property names and values in AngularJs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related