current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm new to Angular JS here. can any one please help me how to parse and display the Json Data in different tables using Angular JS [ { "id": 0, "isActive": false, "balance": 1025.00, "picture": "http://www.placekitten.com/50/50", "age": 25, "name": "Daisy Mcneil", "gender": "female", "company": "Verbus", "email": "[email protected]", "phone": "+1 (936) 586-3983", "address": "849 Newkirk Placez, Laurelton, Nevada, 1086", "registered": "2012-07-15T13:46:25 +07:00", "friends": [ { "id": 0, "name": "Debra Blair" }, { "id": 1, "name": "Henry Avila" }, { "id": 2, "name": "Jody Stark" } ], "service": "cherry" }, { "id": 1, "isActive": true, "balance": -2884.00, "picture": "http://www.placekitten.com/50/50", "age": 23, "name": "Schroeder Atkinson", "gender": "male", "company": "Twiggery", "email": "[email protected]", "phone": "+1 (861) 449-2254", "address": "259 Highland Avenue, Riner, Vermont, 905", "registered": "1998-01-17T08:16:34 +08:00", "friends": [ { "id": 0, "name": "Mendoza Figueroa" }, { "id": 1, "name": "Lenore Morales" }, { "id": 2, "name": "Winifred Bowen" } ], "service": "lemon" } ]

I want to display each JSON object in the different table with a buttion which toggles the table in the html.

the above is the JSON data available...

thanks in advance.

The skeleton for the code is available here https://github.com/50Cubes/WebappTest

share|improve this question

1 Answer 1

up vote 0 down vote

This is the code for index.html file -

<!doctype html>
<html>
<head>
<title>Page Title</title>
<script src="main.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="ViewJson">

<table>
<th>
<td>id</td>
<td>isActive</td>
<td>balance</td>
<td>picture</td>
<td>age</td>
<td>name</td>  
<td>gender</td>
<td>company</td>        
<td>email</td>      
<td>phone</td>
<td>address</td>
<td>registered</td>       
<td>service</td></th>
<tr ng-repeat="post in posts">                      
<td>{{post.id}}</td>     
<td>{{post.isActive}}</td>      
<td>{{post.balance}}</td>       
<td>{{post.picture}}</td>       
<td>{{post.age}}</td>       
<td>{{post.name}}</td>      
<td>{{post.gender}}</td>        
<td>{{post.company}}</td>       
<td>{{post.email}}</td>     
<td>{{post.phone}}</td>     
<td>{{post.address}}</td>       
<td>{{post.registered}}</td>        
<td>{{post.service}}</td></tr></table>
</div>
</div>
</body>
</html>

This is the code for main.js file. Here I am assuming that the name of json file is posts.js -

var app=angular.module('MyApp',[]);
function ViewJson($scope, $http)
{$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
    {$scope.posts = data;});
}
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.