解析JSON并在angular中显示
Parsing from a JSON and show in angular
我有两个JSON格式的数据。我如何解析它们并在angular中显示?我真不知道该怎么做。在第二个数据中,plan_id也指向"计划"数据。我怎么能使小查找对象,将查找使用plan_id的"计划"。下面是json文件和我的索引
{
"plans":[
{
"id":1,
"code":"NEXT_DAY_500gm",
"name":"Next Day less than 500gm",
"cost":55,
"duration":24,
"min_weight":0,
"max_weight":500,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":2,
"code":"NEXT_DAY_500gm_1kg",
"name":"Next Day 500gm to 1kg",
"cost":70,
"duration":24,
"min_weight":501,
"max_weight":1000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":3,
"code":"NEXT_DAY_1kg_2kg",
"name":"Next Day 1kg to 2kg",
"cost":95,
"duration":24,
"min_weight":1001,
"max_weight":2000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":4,
"code":"SAME_DAY_500gm",
"name":"Same Day less than 500gm",
"cost":95,
"duration":8,
"min_weight":0,
"max_weight":500,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":5,
"code":"SAME_DAY_500gm_1kg",
"name":"Same Day 500gm to 1kg",
"cost":130,
"duration":8,
"min_weight":501,
"max_weight":1000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":6,
"code":"SAME_DAY_1kg_2kg",
"name":"Same Day 1kg to 2kg",
"cost":165,
"duration":8,
"min_weight":1001,
"max_weight":2000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
}
]
}
[{"id":23,"sender_id":3,"courier_id":0,"deliverer_id":0,"status":"PENDING","consignment_id":"55C0A999","sender_name":"asdasdas d","cost":"40","package_description":"asdasdasd","sender_address":"asdasdasd","sender_longitude":"","sender_latitude":"","sender_number":null,"receiver_address":"adasdasd","receiver_name":"Shifat Adnan","receiver_number":"01713206053","receiver_longitude":"","receiver_latitude":"","current_longitude":"","current_latitude":"","deliverer":null,"recipient_pays":0,"instructions":"2332323","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":2,"store_id":null,"storeproduct_id":null,"created_at":"2015-08-04 12:01:29"},{"id":28,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"10F317","sender_name":"bleh","cost":"398","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"kjakdjlsdjlaksdjl","receiver_name":"Nigga","receiver_number":"010203001","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"jslklsdflkj","payment_status":null,"cod":0,"recipient_zone_id":null,"plan_id":4,"store_id":null,"storeproduct_id":null,"created_at":"2015-10-04 09:36:23"},{"id":34,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"PENDING","consignment_id":"137F24","sender_name":"bleh","cost":"3223","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"kasdlkaskd asldka","receiver_name":"FAAskl","receiver_number":"199102909","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dsdsdf","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":3,"store_id":null,"storeproduct_id":null,"created_at":"2015-10-06 07:58:28"},{"id":35,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"13C476","sender_name":"bleh","cost":"3310","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"sdfs dfasdfasdfasdf","receiver_name":"sfasd","receiver_number":"224","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dasdasd","payment_status":null,"cod":0,"recipient_zone_id":2,"plan_id":1,"store_id":1,"storeproduct_id":1,"created_at":"2015-10-06 12:54:14"},{"id":36,"sender_id":5,"courier_id":0,"deliverer_id":0,"status":"COMPLETED","consignment_id":"13C4B3","sender_name":"bleh","cost":"330","package_description":"Business Order","sender_address":"bleh","sender_longitude":"bleh","sender_latitude":"bleh","sender_number":"bleh","receiver_address":"sdfs dfasdfasdfasdf","receiver_name":"Some full name","receiver_number":"224","receiver_longitude":"","receiver_latitude":"","current_longitude":"bleh","current_latitude":"bleh","deliverer":null,"recipient_pays":0,"instructions":"dasdasd","payment_status":null,"cod":0,"recipient_zone_id":3,"plan_id":4,"store_id":1,"storeproduct_id":2,"created_at":"2015-10-06 12:55:15”}]
index . html
<!DOCTYPE HTML>
<html>
<head>
<title>Reports </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-app="reportApp" ng-controller="mainCtrl">
<table>
</table>
</body>
我不知道下一步该做什么。如何解析和显示json?
将json对象分配给某个作用域对象变量注:请妥善保管终止符(;)。希望这篇文章能给你一些建议。
$scope.jsonScopeObject={
"plans":[
{
"id":1,
"code":"NEXT_DAY_500gm",
"name":"Next Day less than 500gm",
"cost":55,
"duration":24,
"min_weight":0,
"max_weight":500,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":2,
"code":"NEXT_DAY_500gm_1kg",
"name":"Next Day 500gm to 1kg",
"cost":70,
"duration":24,
"min_weight":501,
"max_weight":1000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":3,
"code":"NEXT_DAY_1kg_2kg",
"name":"Next Day 1kg to 2kg",
"cost":95,
"duration":24,
"min_weight":1001,
"max_weight":2000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":4,
"code":"SAME_DAY_500gm",
"name":"Same Day less than 500gm",
"cost":95,
"duration":8,
"min_weight":0,
"max_weight":500,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":5,
"code":"SAME_DAY_500gm_1kg",
"name":"Same Day 500gm to 1kg",
"cost":130,
"duration":8,
"min_weight":501,
"max_weight":1000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
},
{
"id":6,
"code":"SAME_DAY_1kg_2kg",
"name":"Same Day 1kg to 2kg",
"cost":165,
"duration":8,
"min_weight":1001,
"max_weight":2000,
"COD":1,
"created_at":"-0001-11-30 00:00:00",
"updated_at":"-0001-11-30 00:00:00"
}
]
}
<!DOCTYPE HTML>
<html>
<head>
<title>Pathao Reports </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-app="reportApp" ng-controller="mainCtrl">
<table>
<th>head1</th>
<th>head2</th>
</table>
<tbody>
<tr ng-repeat="data in jsonScopeObject.plans">
<td>{{data.id}}</td>
<td>{{data.code}}</td>
<tr>
</tbody>
</body>
相关文章:
- angular js密码强度显示问题
- 如何在html angular中显示嵌套的json元素
- Angular渲染元素,但不渲染;t显示数据
- 在模板angular 2中显示JSON对象
- Angular UI-GRID未在页面上显示网格
- 使用Angular显示JSON中的HTML
- 在Bootstrap+Angular中一个接一个地显示警报
- 如何在Angular JS中滚动显示元素
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- 使用angular显示复杂json中的列表
- angular ui boostrap日期选择器显示年份第一
- 显示Angular 2 JSON对象
- 突出显示 Angular JS 中的过滤行
- 项目仅在键入后显示?Angular js.
- 过滤结果以显示与ng匹配的结果显示angular js
- 只有$touch为true时才会显示angular ng消息
- 有哪些方法可以以非表格格式显示Angular中的JSON数据
- 为什么后面的HTML代码仍然显示angular代码,而不是纯HTML
- 如何避免在JavaScript代码中断并抛出异常时显示angular标记
- 更新列表中的项目,当点击时显示- Angular JS