How i can bind json data in html table using angular js?

Question

Here is my json data. How I can bind this data in HTML table using angular.js?

[{"keycolumn1":1,"originkey1":1,"datafield1":1},
{"keycolumn1":2,"originkey1":2,"datafield1":2},
{"keycolumn1":3,"originkey1":3,"datafield1":3},
{"keycolumn1":4,"originkey1":4,"datafield1":4},
{"keycolumn1":5,"originkey1":5,"datafield1":5},
{"keycolumn1":11,"originkey1":11,"datafield1":11},
{"keycolumn1":12,"originkey1":12,"datafield1":12},
{"keycolumn1":13,"originkey1":13,"datafield1":13},
{"keycolumn1":14,"originkey1":14,"datafield1":14},
{"keycolumn1":15,"originkey1":15,"datafield1":15}]

Answer 1

There are many ways to display the json data in angular, you can bind your json as

1. ng-repeat

      <tr ng-repeat="values in data"> 
   

2. nested ng-repeat depending on the json format

3. ng-repeat with 'track by' while dealing with index values

       <tr ng-repeat="item in rows">
             <td>{{item.project}}({{item.task}})</td>
             <td  ng-repeat="values in item.hour track by $index">
            <input type="number" ng-model="item.hour[$index]"/>    
             </td>
       </tr>
   

4. ng-repeat with key value pairs

       <tr ng-repeat="(key, value) in data">
        <td> {{key}} </td> <td> {{ value }} </td>
       </tr>
   

In your case, best option is to use basic ng-repeat as

   <tr ng-repeat="values in data">
      <td>{{values.keycolumn1}}</td>
      <td>{{values.originkey1}}</td>
      <td>{{values.datafield1}}</td>
   </tr>

Answer 2

Just try like this,

var appReminder = angular.module('testApp', []);
appReminder.factory('testFactory', function ($http) {
return {}
});
        
appReminder.controller('testController', function PostController($scope, testFactory, $timeout) 
{
  
   $scope.result_function = function () 
   {
      $scope.respose = [
        {"keycolumn1":1,"originkey1":1,"datafield1":1},
        {"keycolumn1":2,"originkey1":2,"datafield1":2},
        {"keycolumn1":3,"originkey1":3,"datafield1":3},
        {"keycolumn1":4,"originkey1":4,"datafield1":4},
        {"keycolumn1":5,"originkey1":5,"datafield1":5},
        {"keycolumn1":11,"originkey1":11,"datafield1":11},
        {"keycolumn1":12,"originkey1":12,"datafield1":12},
        {"keycolumn1":13,"originkey1":13,"datafield1":13},
        {"keycolumn1":14,"originkey1":14,"datafield1":14},
        {"keycolumn1":15,"originkey1":15,"datafield1":15}];
   ;}
  
  $scope.result_function();
});

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


<div ng-app="testApp" data-ng-controller="testController">
  <table border="1">
     <tr>
       <th>Keycolumn</th>
       <th>Originkey</th>
       <th>Datafield</th>
     <tr>
     <tr ng-repeat="item in respose">
       <td>{{item.keycolumn1}}</td>
       <td>{{item.originkey1}}</td>
       <td>{{item.datafield1}}</td>
     </tr>
</table>
</div>

Answer 3

Do you mean to display the json content in a html table?

    $scope.json = [
  {"keycolumn1":1,"originkey1":1,"datafield1":1},
  {"keycolumn1":2,"originkey1":2,"datafield1":2},
  {"keycolumn1":3,"originkey1":3,"datafield1":3},
  {"keycolumn1":4,"originkey1":4,"datafield1":4},
  {"keycolumn1":5,"originkey1":5,"datafield1":5},
  {"keycolumn1":11,"originkey1":11,"datafield1":11},
  {"keycolumn1":12,"originkey1":12,"datafield1":12},
  {"keycolumn1":13,"originkey1":13,"datafield1":13},
  {"keycolumn1":14,"originkey1":14,"datafield1":14},
  {"keycolumn1":15,"originkey1":15,"datafield1":15}];

in html you can use ng-repeat

<table>
  <tr ng-repeat="r in json">
    <td>{{r.keycolumn1}}</td>
    <td>{{r.originkey1}}</td>
    <td>{{r.datafield1}}</td>
  </tr>
</table>

Answer 4

Store this in a json file (data.json). Use $http to get this data as a response and store it in a $scope variable.

For Example:

$http.get("data.json").then(function(response) {
$scope.data = response.data;
});

Answer 5

you need to assign your json to a scope variable like below

$scope.data="your data";

now using this data you can loop in table by using ng-repeat

here is a sample plunker with your data

Answer 6

Simple using ng-repeat by having your json Data in your controller

 <table>
  <tr ng-repeat="r in jsonData">
    <td>{{r.keycolumn1}}</td>
    <td>{{r.originkey1}}</td>
    <td>{{r.datafield1}}</td>
  </tr>
</table>

Also you can have it in your Json file like this

{  
   "data":[  
      {  
         "keycolumn1":1,
         "originkey1":1,
         "datafield1":1
      },
      {  
         "keycolumn1":2,
         "originkey1":2,
         "datafield1":2
      },
      {  
         "keycolumn1":3,
         "originkey1":3,
         "datafield1":3
      },
      {  
         "keycolumn1":4,
         "originkey1":4,
         "datafield1":4
      },
      {  
         "keycolumn1":5,
         "originkey1":5,
         "datafield1":5
      },
      {  
         "keycolumn1":11,
         "originkey1":11,
         "datafield1":11
      },
      {  
         "keycolumn1":12,
         "originkey1":12,
         "datafield1":12
      },
      {  
         "keycolumn1":13,
         "originkey1":13,
         "datafield1":13
      },
      {  
         "keycolumn1":14,
         "originkey1":14,
         "datafield1":14
      },
      {  
         "keycolumn1":15,
         "originkey1":15,
         "datafield1":15
      }
   ]
}

and use it in your controller like this

$http.get('jsonData.json').success(function(data) {
       $scope.jsonFileData = data.data;
    });    

and I have made a working LIVE PLUNK which contains both examples

Answer 7

First you need to associate controller with view then you can access variables of controller in view.

<div  ng-controller="controllername as vm">
<table>
<tr ng-repeat="anyvariable in vm.json">
<td>{{anyvariable.keycolumn1}}</td>
<td>{{anyvariable.originkey1}}</td>
<td>{{anyvariable.datafield1}}</td>
</tr>
</table>
</div>