Incorporating the lodash library allows you to utilize the _.get function effectively for this task.

One approach is to save the _.get function in the controller of your property-grid and then employ it like so:

model="get(propertyObject,prop.key)"

This can be utilized in your template. If the need arises for this feature across multiple sections within your application (not limited to just the property-grid), creating a custom filter would be advisable.

---

The downside to this method is the incapacity to bind the model in such a manner, thereby rendering the values uneditable. A solution can be found by utilizing the _.set function along with an object containing a getter and setter functions.

vm.modelize = function(obj, path) {
    return {
      get value(){return _.get(obj, path)},
      set value(v){_.set(obj, path,v)}
    };
}

You can subsequently employ this function within the template:

<div ng-repeat="prop in propertyData({object: propertyObject})">
  <input type="text"
          ng-model="ctrl.modelize(propertyObject,prop.key).value"
          ng-model-options="{ getterSetter: true }"></input>
</div>

For a simplified demonstration, refer to this Plunker.

---

If you are not utilizing lodash, a streamlined version of the _.get function is available, extracted from the lodash library.

function getPath(object, path) {
  path = path.split('.')

  var index = 0
  var length = path.length;

  while (object != null && index < length) {
    object = object[path[index++]];
  }
  return (index && index == length) ? object : undefined;
}

This function ensures avoidance of any

Cannot read property 'foo' of undefined

errors. It proves beneficial, especially when dealing with lengthy property chains where there may exist undefined values. When striving for usage of more intricate paths (e.g., foo.bar[0]), resorting to the complete _.get function from lodash is necessary.

Moreover, presented below is a simplified rendition of the _.set function, also derived from the lodash library:

function setPath(object, path, value) {
    path = path.split(".")

    var index = -1,
        length = path.length,
        lastIndex = length - 1,
        nested = object;

    while (nested != null && ++index < length) {
        var key = path[index]
        if (typeof nested === 'object') {
            var newValue = value;
            if (index != lastIndex) {
                var objValue = nested[key];
                newValue = objValue == null ?
                    ((typeof path[index + 1] === 'number') ? [] : {}) :
                    objValue;
            }

            if (!(hasOwnProperty.call(nested, key) && (nested[key] === value)) ||
                (value === undefined && !(key in nested))) {
                nested[key] = newValue;
            }
        }
        nested = nested[key];
    }
    return object;
}

Note that these extracted functions overlook certain edge cases managed by the lodash library. Nevertheless, they should suffice for most scenarios.

When creating the lastSitePropertyData, consider constructing the object dynamically instead of hardcoding it

 function createObject (){
     for(var key in site){
        lastSitePropertyData.push({key:key, value:site[key], editable: true, type:"text"});  
} }

Later on, use functions to retrieve data as shown below

function getKey(prop){
        if(typeof prop.value === 'object'){
        return prop.value.key;  //you can run a loop or create a deep recursive method - it's up to you 
    }
    else return prop.key;
}
function getValue(prop){
        if(typeof prop === 'object'){
        return prop.value.value;   //you have to run a loop to get value from a deep recursive method - it's up to you 
    }
    else return prop.value;
}

This approach can be used in HTML using {{getKey(prop)}} and {{getValue(prop)}} For a working demo, please refer to this link - https://jsfiddle.net/718px9c2/4/

Note: This is just an idea for accessing JSON data more efficiently, Angular is not utilized in the demo.

One suggestion is to implement a solution like this. If you want to prevent cluttering object.proto (which is always advisable), consider moving this functionality to another module.

(function () {

    'use strict';
    if (Object.hasOwnProperty('getDeep')) {
        console.error('object prototype already has prop function');
        return false;
    }

    function getDeep(propPath) {
        if (!propPath || typeof propPath === 'function') {
            return this;
        }

        var props = propPath.split('.');

        var result = this;
        props.forEach(function queryProp(propName) {
            result = result[propName];
        });

        return result;
    }

    Object.defineProperty(Object.prototype, 'getDeep', {
        value: getDeep,
        writable: true,
        configurable: true,
        enumerable: false
    });


}());

My approach involves utilizing grids to display data, with each grid potentially showing different objects and columns. However, I do not tackle this all at once.

1. I have a custom type service where I define types and set default configurations.
2. There is a specific grid service that creates the grid definition options based on my specifications.
3. In the controller, I initialize the grid by using the grid service and specifying column order and any necessary overrides for default configurations. The grid service then generates appropriate filtering and ordering configurations based on the field type definitions.