Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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}]
share|improve this question
1  
Possible duplicate of Filter ng-repeat json result against array – Dev 20 hours ago
    
Haven't you seen suggested question at that time was you asking a question below that text box? It's a duplicate question. – Jigar7521 20 hours ago

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>
share|improve this answer

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;
});
share|improve this answer

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

share|improve this answer

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

share|improve this answer

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>

share|improve this answer

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>
share|improve this answer

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.