how to display below JSON in a table using angularjs

Question

{  
   "ldoc":{  
      "SOLD":{  
         "range":{  
            "1 - 2":0,
            "No LDOC":2,
            "0 - 0":0,
            "8 - 14":1,
            "15+":2,
            "3 - 7":7
         }
      },
      "STOCK":{  
         "range":{  
            "1 - 2":0,
            "No LDOC":2,
            "0 - 0":0,
            "8 - 14":20,
            "15+":13,
            "3 - 7":6
         }
      }
   }
}

how to display this data in a table format using angular js .Please give me some approach.This data is dynamic.

Answer 1

Check the working fiddle That's how you can display data in the table.

<div ng-app='myApp'>
    <div class="wrapper" ng-controller="Main">
        <table>
            <tr>
                <th>SOLD</th>
                <th>STOCK</th>
            </tr>
            <tbody>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["1 - 2"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["1 - 2"]}}</td>
                </tr>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["No LDOC"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["No LDOC"]}}</td>
                </tr>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["0 - 0"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["0 - 0"]}}</td>
                </tr>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["8 - 14"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["8 - 14"]}}</td>
                </tr>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["15+"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["15+"]}}</td>
                </tr>
                <tr>
                    <td>{{jsonObject.ldoc.SOLD.range["3 - 7"]}}</td>
                    <td>{{jsonObject.ldoc.STOCK.range["3 - 7"]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

And your Angular app:

var myApp = angular.module('myApp', []);

    myApp.controller('Main', function($scope){
        $scope.jsonObject = {  
           "ldoc":{  
              "SOLD":{  
                 "range":{  
                    "1 - 2":0,
                    "No LDOC":2,
                    "0 - 0":0,
                    "8 - 14":1,
                    "15+":2,
                    "3 - 7":7
                 }
              },
              "STOCK":{  
                 "range":{  
                    "1 - 2":0,
                    "No LDOC":2,
                    "0 - 0":0,
                    "8 - 14":20,
                    "15+":13,
                    "3 - 7":6
                 }
              }
           }
        };

    });