AngularJs: Convert json string to html table

Question

I am an absolute newbie to angularjs and i have been making my hands dirty from the past 3 days. Now, the requirement is to convert a json string from the rest end point to tabular data. Here is the code i am trying.

 $scope.getDataCatalogue = function(){

       $http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=485a35b6b9544134b70af52867292071&d=20&pt=PostalCode&format=json')
           .success(function(data, status, headers, config){
                 //do something with your response
                 $scope = data;
           })
           .error(function(error){
                 console.log("not world");
           });
  }

   $scope.getDataCatalogue = function(){
    alert('getDataCatalogue');
   }

Now,how can i convert the json to grid from the data. Is this the right way to approach the problem.

There are very less chances that you will find boilerplate could to do this, If you try to form a table by yourself after sorting the data it would be the best — AndroConsis
– AndroConsis, Commented Sep 19, 2016 at 10:00
is your data coming in a fixed known structure ? I mean is the number columns/properties in your object the same always ? — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Sep 19, 2016 at 10:05

Nikhil Nanjappa · Accepted Answer · 2016-09-19 10:14:51Z

2

If you have a fixed structure coming out of the data then you can simply make use of ng-repeat to iterate through the object(data) and display it on your pre-created table. Fiddle

Example shown below:

Considering this is your object which your assigning to a $scope variable name people. $scope.people = data;

[
    {
      id: 1,
      firstName: "Peter",
      lastName: "Jhons"
    },
    {
      id: 2,
      firstName: "David",
      lastName: "Bowie"
    }
]

In your controller:

.success(function(data, status) {
    $scope.people = data;
 });

In your HTML :

<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>

answered Sep 19, 2016 at 10:14

Nikhil Nanjappa

6,6823 gold badges30 silver badges45 bronze badges

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

Comments

Amygdaloideum · Accepted Answer · 2016-09-19 10:06:23Z

0

Either do it yourself in the view:

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data">
            <td>{{row.attribute1}}</td>
            <td>{{row.attribute2}}</td>
        </tr>
    </tbody>
</table>

Or use a library like ui-grid to render a more advanced table.

answered Sep 19, 2016 at 10:06

Amygdaloideum

5,2232 gold badges16 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJs: Convert json string to html table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related