JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Application" ng-controller="jsoncrudctrl">
    <script type="text/ng-template" id="node.html">
        <div>
            Current: key = {{key}}, value = {{value}}
        </div>
         <div>
             Parent: key = {{parent.key}}, value = {{parent.value}}, isArray: {{isArray(parent.value)}}
        </div>
        <div>
            Grand parent: key = {{parent.parent.key}}, value = {{parent.parent.value}}, isArray: {{isArray(parent.parent.value)}}
        </div>   
        <ul ng-if="isObject(value)">
<li ng-repeat="(key,value) in value" ng-include="'node.html'" onload="parent=$parent.$parent.$parent"></li>            
        </ul>
    </script>
    
    <ul>
        <li ng-repeat="(key,value) in json" ng-include="'node.html'"  onload="parent=$parent.$parent"></li>
    </ul>
</div>

JavaScript

var app = angular.module("Application",[]);

app.controller("jsoncrudctrl",function ($scope){
    $scope.json = { array1: ["an", "array"], obj1: { key1: 8, key2: "more text", subfields:{
        subfield1:"new subfield"
    }
   }, field2: "loremips"};
    
    $scope.isArray = function (input){
        return Object.prototype.toString.call(input) === "[object Array]";
    };
    
    $scope.isObject = function(input){
        return input instanceof Object;
    };
});