current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

Currently I want to show HTML table by parsing JSON data from file using Angular JS, And It's not working can someone please help me?

And Also As a Enhancement How Can I get the 2 Divs for 2 different JSON file

HTML Code

<html>
    <div ng-controller="get_controller">
        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
        <span class="input-group-btn">
            <button type="submit" ng-click="geValues()" class="btn btn-primary">Submit</button>
        </span>
    </div>

    <div ng-controller="get_controller">
        <table>
            <tbody>
                <tr>
                    <th ng-repeat="list in personDetails">{{list.Name}}
                    </th>
                </tr>
                <tr>
                    <td class="features" ng-repeat="list in personDetails">{{list.Location}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</html>

Angular JS Code

var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function ($scope, $http) {

  $scope.geValues =  function() {
        $http({method: 'POST', url: 'posts.json'}).success(function(data) {
            $scope.post = data;
            $scope.personDetails = Employee;
             })
    },
});

posts.json (Json File)

{
  "Employee": [
    {
      "Name": "Rocky",
      "Location": "Office"
    },
    {
      "Name": "John",
      "Location": "Home"
    }
  ]
}
share|improve this question
    
whats the error? what is Employee? it should be data. Employee. – Deendayal Garg 1 hour ago
    
@DeendayalGarg Sorry I have this code in the but i missed to add Employee= data['Employee']; Issue is When I click on button I am able to get the data in Console but I am not seeing table populated – Mahesh Gadagi 59 mins ago
up vote 0 down vote accepted

Should be a GET request, also the you need to access the data from the response object which contains the Employee array. Code should be,

$http.get('test.json').then(function (response){
  $scope.post = response.data;
  $scope.personDetails = response.data.Employee;
});

if you want it to happen on ng-click, put the call inside a function,

  $scope.geValues = function() {
      $http.get('test.json').then(function(response) {
        $scope.post = response.data;
        $scope.personDetails = response.data.Employee;

      });
    }

DEMO

share|improve this answer
    
Still not working.. – Mahesh Gadagi 50 mins ago
    
@MaheshGadagi Check now – Sajeetharan 48 mins ago
    
Really Thanks , I am able to get the data table But I want to be done after clicking the button. Can you please help me in that – Mahesh Gadagi 43 mins ago
    
@MaheshGadagi check now, i have updated it – Sajeetharan 41 mins ago
    
Really Thanks It worked like a Charm :) – Mahesh Gadagi 26 mins ago
up vote 0 down vote

Thanks Sajeetharan, The answer worked as I was expecting.

share

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.