CODEWITHSUNDEEP
javascriptjsonangularjs
user3078580
user3078580

Reputation: 65

JSON table creation with Angular in JSFiddle

Trying to get some JSON and Angular.js to work with out any luck. I'm using the following code but it doesnt seem to run the loadpeople function when the 'click here' is clicked. could be missing something silly.

HTML 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Render json in table using AngularJs - jsFiddle demo by mjaric</title>


      <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

      <script type='text/javascript' src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script type='text/javascript' src="loadpeople.js"></script>

      <script type='text/javascript' src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>


  <style type='text/css'>
    table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

  </style>

</head>
<body>
  <div ng-app="myApp">
<div ng-controller="PeopleCtrl">
    <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
    </tr>
</table>
</div>
</div>

</body>


</html>

JS

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));


var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

}

Upvotes: 1

Views: 1228

Answers (2)

Michael
Michael

Reputation: 434

I got the example to work fine using your code in this fiddle: http://jsfiddle.net/4w6Uv/3. I also repeated the example using a simple node.js server and this time it worked by switching the mockdata to a straight array so:

mockData = [{
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
];

It's also worth mentioning that jQuery isn't actually required in your example (unless other code that you haven't provided uses it). Your post isn't tagged with Angular which could help elicit more answers. The function that is called is made available by the Angular controller rather than having anything to do with jQuery (apologies if this is already known).

Upvotes: 1

Aaron H
Aaron H

Reputation: 159

A quick check reveals your success function is never called. Are you sure you're able to post to '/echo/json/'?

Upvotes: 0

Related Questions