JSON table creation with Angular in JSFiddle

Question

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

    };

}

Check console for errors as well as Network tab for AJAX errors. — tymeJV
– tymeJV, Commented Dec 10, 2013 at 21:07

Michael · Accepted Answer · 2013-12-10 22:32:17Z

1

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).

edited Dec 10, 2013 at 22:32

answered Dec 10, 2013 at 21:08

Michael

4348 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron H · Accepted Answer · 2013-12-10 21:20:49Z

0

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

answered Dec 10, 2013 at 21:20

Aaron H

1591 silver badge4 bronze badges

Collectives™ on Stack Overflow

JSON table creation with Angular in JSFiddle

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related