Javascript 我想在表Angularjs中显示这个Json数据
我的JSON文件的内容是:Javascript 我想在表Angularjs中显示这个Json数据,javascript,jquery,angularjs,json,Javascript,Jquery,Angularjs,Json,我的JSON文件的内容是: { "categories":[ { "dept_id":"123", "category_name":"database", "category_discription":"list of database", "current time":"2016-07-21 06:27:17", "id":"1" }, {
{
"categories":[
{
"dept_id":"123",
"category_name":"database",
"category_discription":"list of database",
"current time":"2016-07-21 06:27:17",
"id":"1"
},
{
"dept_id":"1234",
"category_name":"debugging",
"category_discription":"program debugger",
"current time":"2016-07-21 06:32:24",
"id":"2"
},
{
"dept_id":"12345",
"category_name":"system analyzer",
"category_discription":null,
"current time":"2016-07-21 06:33:23",
"id":"3"
}
],
"departments":[
{
"name":"manpreet singh",
"address_info":"qadian",
"current time":null,
"id":"1"
},
{
"name":"tushal gupta",
"address_info":"amritsar",
"current time":"2016-07-21 06:10:14",
"id":"2"
},
{
"name":"haroop singh",
"address_info":"amritsar",
"current time":"2016-07-21 06:11:12",
"id":"3"
}
],
"digital_marketing":[
{
"dept_id":"123",
"phone":"99889988",
"mobile":null,
"email":"thbs@gmail.com",
"web":null,
"facebook":null,
"twitter":null,
"linkedin":null,
"current time":"2016-07-21 06:10:16",
"id":"1"
},
{
"dept_id":"1234",
"phone":"998899888",
"mobile":null,
"email":null,
"web":null,
"facebook":"gtudgal@fb.com",
"twitter":"tushalgupta",
"linkedin":null,
"current time":"2016-07-21 06:30:19",
"id":"2"
},
{
"dept_id":"12345",
"phone":"99889877",
"mobile":null,
"email":"fhdts@mail.com",
"web":null,
"facebook":"sdfh33@fb.com",
"twitter":null,
"linkedin":null,
"current time":"2016-07-21 06:30:13",
"id":"3"
}
]
}
我正在使用它,但它只显示类别数据:
<table border="1">
<b><tn>categories</tn></b>
<tr>
<th>dept_id</th>
<th>category_name</th>
<th>category_discription</th>
<th>current time</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in retails">
<td>{{ x.dept_id }}</td>
<td>{{ x.category_name }}</td>
<td>{{ x.category_discription }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
类别
部门id
类别名称
类别描述
当前时间
身份证件
{{x.dept_id}
{{x.category_name}
{{x.类别描述}
{{x.currenttime}
{{x.id}
var-app=angular.module('myApp',[]);
app.controller('dataCtrl',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.retails=response.data.categories;
});
});
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
var app=angular.module('myApp2',[]);
app.controller('customersCtrl3',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.retails=response.data.departments;
});
});
此代码仅在表类别中显示类别数据。我想在不同的表中显示所有数据,如部门表中的部门数据、数字营销表中的数字营销数据。如何使用angularjs在单个代码中执行此操作。请将您的代码更改为此??您必须将JSON数据中的部门和类别映射到两个不同的对象
<script>
var app = angular.module('myApp2', []);
app.controller('customersCtrl3', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
$scope.department = response.data.departments;//categories
$scope.categories = response.data.categories;
});
});
</script>
var app=angular.module('myApp2',[]);
app.controller('customersCtrl3',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.department=response.data.departments;//类别
$scope.categories=response.data.categories;
});
});
在您的html中:
<table border="1">
<b><tn>categories</tn></b>
<tr>
<th>dept_id</th>
<th>category_name</th>
<th>category_discription</th>
<th>current time</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in categories">
<td>{{ x.dept_id }}</td>
<td>{{ x.category_name }}</td>
<td>{{ x.category_discription }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
<b><tn>departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in department">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
类别
部门id
类别名称
类别描述
当前时间
身份证件
{{x.dept_id}
{{x.category_name}
{{x.类别描述}
{{x.currenttime}
{{x.id}
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
你能把你的代码改成这个吗??您必须将JSON数据中的部门和类别映射到两个不同的对象
<script>
var app = angular.module('myApp2', []);
app.controller('customersCtrl3', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
$scope.department = response.data.departments;//categories
$scope.categories = response.data.categories;
});
});
</script>
var app=angular.module('myApp2',[]);
app.controller('customersCtrl3',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.department=response.data.departments;//类别
$scope.categories=response.data.categories;
});
});
在您的html中:
<table border="1">
<b><tn>categories</tn></b>
<tr>
<th>dept_id</th>
<th>category_name</th>
<th>category_discription</th>
<th>current time</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in categories">
<td>{{ x.dept_id }}</td>
<td>{{ x.category_name }}</td>
<td>{{ x.category_discription }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
<b><tn>departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in department">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
类别
部门id
类别名称
类别描述
当前时间
身份证件
{{x.dept_id}
{{x.category_name}
{{x.类别描述}
{{x.currenttime}
{{x.id}
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
var-app=angular.module('myApp',[]);
app.controller('CategoryCtrl',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.category=response.data.categories;
});
});
app.controller('DepartmentCtrl',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.department=response.data.departments;
});
});代码>
类别
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
var-app=angular.module('myApp',[]);
app.controller('CategoryCtrl',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.category=response.data.categories;
});
});
app.controller('DepartmentCtrl',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.department=response.data.departments;
});
});代码>
类别
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
不需要一次又一次地创建模块ng App
,脚本也不需要这样做
您可以将任意数量的数据分配给同一ng应用程序中的Scope variable
<div ng-app="myApp2" ng-controller="customersCtrl3">
<table border="1">
<b><tn>categories</tn></b>
<tr>
<th>dept_id</th>
<th>category_name</th>
<th>category_discription</th>
<th>current time</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in retails">
<td>{{ x.dept_id }}</td>
<td>{{ x.category_name }}</td>
<td>{{ x.category_discription }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
<b><tn>departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in retails">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
//Same for the digital_marketing table
</table>
</div>
<script>
var app = angular.module('myApp2', []);
app.controller('customersCtrl3', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
$scope.categories = response.data.categories;
$scope.department = response.data.departments;
$scope.digital_marketing= response.data.digital_marketing;//same for this table
});
});
</script>
类别
部门id
类别名称
类别描述
当前时间
身份证件
{{x.dept_id}
{{x.category_name}
{{x.类别描述}
{{x.currenttime}
{{x.id}
部门
名称
地址信息
当前时间
身份证件
{{x.name}
{{x.address_info}
{{x.currenttime}
{{x.id}
//同样适用于数字营销表
var app=angular.module('myApp2',[]);
app.controller('customersCtrl3',函数($scope,$http){
$http.get(“/home/manpret/Desktop/retails.json”)。然后(函数(响应){
$scope.categories=response.data.categories;
$scope.department=response.data.departments;
$scope.digital\u marketing=response.data.digital\u marketing;//此表相同
});
});
不需要一次又一次地创建模块ng App
,脚本也不需要这样做
您可以将任意数量的数据分配给同一ng应用程序中的Scope variable
<div ng-app="myApp2" ng-controller="customersCtrl3">
<table border="1">
<b><tn>categories</tn></b>
<tr>
<th>dept_id</th>
<th>category_name</th>
<th>category_discription</th>
<th>current time</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in retails">
<td>{{ x.dept_id }}</td>
<td>{{ x.category_name }}</td>
<td>{{ x.category_discription }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
<b><tn>departments</tn></b>
<tr>
<th>Name</th>
<th>Address_info</th>
<th>currenttime</th>
<th>Id</th>
</tr>
<tr ng-repeat="x in retails">
<td>{{ x.name }}</td>
<td>{{ x.address_info }}</td>
<td>{{ x.currenttime }}</td>
<td>{{ x.id }}</td>
</tr>
</table>
<table border="1">
//Same for the digital_marketing table
</table>
</div>
<script>
var app = angular.module('myApp2', []);
app.controller('customersCtrl3', function($scope, $http) {
$http.get("/home/manpreet/Desktop/retails.json").then(function (response){
$scope.categories = response.data.categories;
$scope.department = response.data.departments;
$scope.digital_marketing= response.data.digital_marketing;//same for this table
});
});
</script>
类别
部门id
类别名称
类别描述
当前时间
身份证件
{{x.dept_id}
{{x.category_名称