使用Angular JS解析JSON并在不同的表中显示

JSON parsing and displaying in different tables using Angular JS

本文关键字：显示 JS Angular 解析 JSON 使用      更新时间：2023-09-26

我是Angular JS的新手。谁能帮我如何解析和显示Json数据在不同的表使用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": "daisymcneil@verbus.com", "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": "schroederatkinson@twiggery.com", "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" } ]

我想在不同的表中显示每个JSON对象，并使用一个按钮来切换html中的表。

以上是可用的JSON数据…

thanks in advance.

代码的框架可以在这里找到https://github.com/50Cubes/WebappTest

这是index.html文件的代码-

<!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>

这是main.js文件的代码。这里我假设json文件的名称是posts.js -

var app=angular.module('MyApp',[]);
function ViewJson($scope, $http)
{$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
    {$scope.posts = data;});
}
相关文章：