0
{  
   "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.

4
  • 2
    show your code(effort) first we are here to help you :-) Commented Feb 13, 2015 at 9:47
  • 2
    Posible duplicate from this Commented Feb 13, 2015 at 9:51
  • A tip: you may have to apply some transformations on the data before feeding it to the view; I'd recommend implementing some function that would generate either a bidimensional array or an array of flat objects from this structure; that should be easier to turn into a table; if you need to make it editable, though, it would need a slightly more complex approach.. Commented Feb 13, 2015 at 9:53
  • I get this data ffrom spring rest services .I cant change the data format ! So , is there any solution for this?? Commented Feb 13, 2015 at 9:57

1 Answer 1

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
                 }
              }
           }
        };

    });
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.