I Want To Show This Json Data In tables Angularjs

Question

The content of my JSON file is:

{  
   "categories":[  
      {  
         "dept_id":"123",
         "category_name":"database",
         "category_discription":"list of database",
         "current time":"2016-07-21 06:27:17",
         "id":"1"
      },
      {  
         "dept_id":"1234",
         "category_name":"debugging",
         "category_discription":"program debugger",
         "current time":"2016-07-21 06:32:24",
         "id":"2"
      },
      {  
         "dept_id":"12345",
         "category_name":"system analyzer",
         "category_discription":null,
         "current time":"2016-07-21 06:33:23",
         "id":"3"
      }
   ],
   "departments":[  
      {  
         "name":"manpreet singh",
         "address_info":"qadian",
         "current time":null,
         "id":"1"
      },
      {  
         "name":"tushal gupta",
         "address_info":"amritsar",
         "current time":"2016-07-21 06:10:14",
         "id":"2"
      },
      {  
         "name":"haroop singh",
         "address_info":"amritsar",
         "current time":"2016-07-21 06:11:12",
         "id":"3"
      }
   ],
   "digital_marketing":[  
      {  
         "dept_id":"123",
         "phone":"99889988",
         "mobile":null,
         "email":"thbs@gmail.com",
         "web":null,
         "facebook":null,
         "twitter":null,
         "linkedin":null,
         "current time":"2016-07-21 06:10:16",
         "id":"1"
      },
      {  
         "dept_id":"1234",
         "phone":"998899888",
         "mobile":null,
         "email":null,
         "web":null,
         "facebook":"gtudgal@fb.com",
         "twitter":"tushalgupta",
         "linkedin":null,
         "current time":"2016-07-21 06:30:19",
         "id":"2"
      },
      {  
         "dept_id":"12345",
         "phone":"99889877",
         "mobile":null,
         "email":"fhdts@mail.com",
         "web":null,
         "facebook":"sdfh33@fb.com",
         "twitter":null,
         "linkedin":null,
         "current time":"2016-07-21 06:30:13",
         "id":"3"
      }
   ]
}

I am using this,but it only show category data:

<table border="1">
  <b><tn>categories</tn></b>
  <tr>
    <th>dept_id</th>
    <th>category_name</th>
    <th>category_discription</th>
    <th>current time</th>
    <th>Id</th>
  </tr>
  <tr ng-repeat="x in retails">
    <td>{{ x.dept_id }}</td>
    <td>{{ x.category_name }}</td>
    <td>{{ x.category_discription }}</td>
    <td>{{ x.currenttime }}</td>
    <td>{{ x.id }}</td>
  </tr>
</table>

<script>
    var app = angular.module('myApp', []);
    app.controller('dataCtrl', function($scope, $http) {
      $http.get("/home/manpreet/Desktop/retails.json").then(function (response) {
        $scope.retails = response.data.categories;
      });
    });
</script><br>
<div ng-app="myApp2" ng-controller="customersCtrl3">
    <table border="1">
        <b>
            <tn>departments</tn>
        </b>
        <tr>
            <th>Name</th>
            <th>Address_info</th>
            <th>currenttime</th>
            <th>Id</th>
        </tr>
        <tr ng-repeat="x in retails">
            <td>{{ x.name }}</td>
            <td>{{ x.address_info }}</td>
            <td>{{ x.currenttime }}</td>
            <td>{{ x.id }}</td>
        </tr>
    </table>
</div>
<script>
    var app = angular.module('myApp2', []);
    app.controller('customersCtrl3', function($scope, $http) {
    $http.get("/home/manpreet/Desktop/retails.json").then(function (response){
       $scope.retails = response.data.departments;
     });
    });
</script>

This code only show category data in table categories.I want to show all data in different tables like departments data in departments table, digital_marketing data in digital_marketing table.how can i do it in single code using angularjs.

check the answer. hope it will work – Debug Diva Aug 24 '16 at 10:47 — Debug Diva, Aug 24 '16 at 10:47

score 2 · Answer 1 · answered Aug 24 '16 at 08:05

Can you please change your code to this?? You will have to map departments and categories from you JSON data in to two different objects.

<script>
var app = angular.module('myApp2', []);
app.controller('customersCtrl3', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
   $scope.department = response.data.departments;//categories
          $scope.categories = response.data.categories;
 });
});
</script>

And in your html:

<table border="1">
  <b><tn>categories</tn></b>
  <tr>
    <th>dept_id</th>
    <th>category_name</th>
    <th>category_discription</th>
    <th>current time</th>
    <th>Id</th>
  </tr>
  <tr ng-repeat="x in categories">
    <td>{{ x.dept_id }}</td>
    <td>{{ x.category_name }}</td>
    <td>{{ x.category_discription }}</td>
    <td>{{ x.currenttime }}</td>
    <td>{{ x.id }}</td>
  </tr>
</table>

<table border="1">
<b><tn>departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in department">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>

score 0 · Answer 2 · answered Aug 24 '16 at 08:07

var app = angular.module('myApp', []);
app.controller('CategoryCtrl', function($scope, $http) {
  $http.get("/home/manpreet/Desktop/retails.json").then(function (response) {
    $scope.category = response.data.categories;
  });
});
app.controller('DepartmentCtrl', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
   $scope.department = response.data.departments;
 });
});

<br>

<div ng-app="myApp" ng-controller="CategoryCtrl DepartmentCtrl">

<table border="1">
<b><tn>Categories</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in category">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
  
<table border="1">
<b><tn>Departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in department">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table> 

</div>

how can i add new data in json file by using angularjs??can you help me? — manpreet singh bhinder, Aug 26 '16 at 09:13
you need to have service layer which communicate with API and post data and save . — Sajed, Sep 20 '16 at 01:40

score 0 · Accepted Answer · answered Aug 24 '16 at 08:12

There is no need to Create module ng-App Again and Again And Same For Script You can assign Any number of Data to Scope varible which are in same ng-app

<div ng-app="myApp2" ng-controller="customersCtrl3">
    <table border="1">
      <b><tn>categories</tn></b>
      <tr>
        <th>dept_id</th>
        <th>category_name</th>
        <th>category_discription</th>
        <th>current time</th>
        <th>Id</th>
      </tr>
      <tr ng-repeat="x in retails">
        <td>{{ x.dept_id }}</td>
        <td>{{ x.category_name }}</td>
        <td>{{ x.category_discription }}</td>
        <td>{{ x.currenttime }}</td>
        <td>{{ x.id }}</td>
      </tr>
    </table>

    <table border="1">
    <b><tn>departments</tn></b>
    <tr>
    <th>Name</th>
    <th>Address_info</th>
    <th>currenttime</th>
    <th>Id</th>
    </tr>
    <tr ng-repeat="x in retails">
    <td>{{ x.name }}</td>
    <td>{{ x.address_info }}</td>
    <td>{{ x.currenttime }}</td>
    <td>{{ x.id }}</td>
    </tr>
    </table>
<table border="1">


    //Same for the digital_marketing table

</table>

    </div>

    <script>
    var app = angular.module('myApp2', []);
    app.controller('customersCtrl3', function($scope, $http) {
    $http.get("/home/manpreet/Desktop/retails.json").then(function (response){

       $scope.categories = response.data.categories;
       $scope.department = response.data.departments;
      $scope.digital_marketing= response.data.digital_marketing;//same for this table

     });
    });
    </script>

I Want To Show This Json Data In tables Angularjs

3 Answers3