fill json data in html dynamically

Question

I want to fill a table from a json file using AngularJS.

json file may vary from time to time (dynamic data).

Requirement is: Fill the table in html by parsing json file. Table is in view.html file and AngularJS code should be in view.js.

JSON file: (there may be even more no of id's under services tree)

{
"result": {
    "services": [
        {
            "id": 1,
            "name": "My UI for some project that I'm doing that won't fit",
            "application": "app",
            "message": "application",
            "status": 1
        },
        {
            "id": 2,
            "name": "My DB for some project that I'm doing",
            "application": "app1",
            "message": "application1",
            "status": 3
        },
        {
            "id": 3,
            "name": "Another service",
            "application": "app2",
            "message": "application2",
            "status": 3
        }
    ],
 }
}

The output table should look like:

PS: the table alignment should be set as the name value may or may not has more info.

Thanks

So what have you tried already? Have you set up your angular controller? — WillardSolutions, Feb 23 '16 at 19:05
Stackoverflow is not a "write my code for me" service. Please try on your own first and then come back with your code. — Johannes Jander, Feb 23 '16 at 19:08
apologies for the grammer, i tried it using a controller, but didnt able to get the dynamic data, but i am able to fetch the results when the json file is static. PS: i cannot attach the code as in my work place, i dont have acess to other sites. — user1190615, Feb 24 '16 at 04:53

score 2 · Accepted Answer · edited May 23 '17 at 12:13

Although, like @Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.

If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json object. If the order is important, let me know and I will help you to figure it out.

To read more about what we have here please follow those links:

Now, to the code:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.json = {
    "result": {
      "services": [
        {
          "id": 1,
          "name": "My UI for some project that I'm doing that won't fit",
          "application": "app",
          "message": "application",
          "status": 1
        },
        {
          "id": 2,
          "name": "My DB for some project that I'm doing",
          "application": "app1",
          "message": "application1",
          "status": 3
        },
        {
          "id": 3,
          "name": "Another service",
          "application": "app2",
          "message": "application2",
          "status": 3
        }
      ],
    }
  }  
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="app" data-ng-controller="ctrl">
  <table data-ng-if="json.result.services.length > 0">
    <thead>
      <tr>
        <th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="service in json.result.services">
        <td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
      </tr>
    </tbody>
  </table>
</div>

Thanks for the help and actually i am new to angular js ........ ng-repeat saved my day. — user1190615, Feb 24 '16 at 10:33
I'm happy to hear ;) `ng-repeat` is the basic of the basic of AngularJS. — Mosh Feu, Feb 24 '16 at 11:45
i tried and able to fill the table, but it seems some issue with alignment since few values are occupying more space, is there any way to fix ? i tried using span and gave equal width for the columns but the html is displayed in the form of popup..... any ideas — user1190615, Feb 24 '16 at 18:39
Can you update your question with a demo? Or maybe ask a new question with demo and paste the link here? So it will help to other people.. — Mosh Feu, Feb 24 '16 at 22:17

fill json data in html dynamically

1 Answers1