1

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}]
2
  • 1
    Possible duplicate of Filter ng-repeat json result against array Commented Nov 23, 2016 at 5:26
  • Haven't you seen suggested question at that time was you asking a question below that text box? It's a duplicate question. Commented Nov 23, 2016 at 5:28

7 Answers 7

4

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>
Sign up to request clarification or add additional context in comments.

2 Comments

how to get same table value after changes in item.hour model and save that table using json array
@SaikhRakif could you elaborate your problem statement?
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>

Comments

1

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>

Comments

1

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;
});

Comments

1

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

Comments

1

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

Comments

1

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>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.