json ng-repeat multiple level object in angularjs

Question

How we can show below JSON into ul>li listing through ng-repeat ?

Something like this:

• Home
• about us
  • About one
  • About Two
• Service
  • Service one
  • Service Two

From below JSON

{
    "Home_page": {
        "name": "Home",
        "shortname": "Home_page",
        "heading": "Welcome to BSL-I"
    },
    "About_us": {
        "About-One": {
            "name": "About one",  
            "heading": "Artist one"
        },
        "About-Two": {
            "name": "About Two",
            "heading": "About Two"
        }
    },
    "Service": {
        "Service-One": {
            "name": "About one",
            "shortname": "About_one",
            "heading": "Artist one"
        },
        "service-Two": {
            "About-One": {
                "name": "About one"
                        },
            "About-Two": {
                "name": "About Two"

            }
        }
    }
}

Answer 1

Well first of all you have to decode the JSON to a valid javascript array:

$scope.myArray = angular.fromJson(myJSONarray);

from: https://docs.angularjs.org/api/ng/function/angular.fromJson

Second for the listing:

<ul>
  <li ng-repeat="element in myArray">
     {{element}}
     <ul ng-show="element[0]">
       <li ng-repeat="subElement in element[0]">
         {{subElement}}
       </li>
     </ul>
  </li>
</ul>

I have not tested it but it should look something like above.

Answer 2

Script::

 $http.post('URL')
 .success(function (data, status, headers, config) {
     var res = JSON.parse(data);
      $scope.response= res;

Now Your Json Objects is Hold in response .

You can use response to differentiate objects like :

response.Home_page, response.About_us.About-One, response.Service.Service-One, response.Service.service-Two

Apply in Html:

  <ul>
    <li ng-repeat="home in response.Home_page">
       {{home.name}}
   </li>
 </ul>