将Id替换为名称
Replace Id with name
我有什么
我有一些json格式的数据,如下所示:
var data = [{id: 1, name="AB", designation=1},
{id: 2, name="CD", boss= 1, designation=2},
{id: 3, name="EF", boss= 1, designation=2},
{id: 4, name="GH", boss= 1, designation=2},
{id: 5, name="IJ", boss= 2, designation=3},
{id: 6, name="KL", boss= 3, designation=3},
{id: 7, name="MN", boss= 3, designation=3},
{id: 8, name="OP", boss= 7, designation=4},
{id: 9, name="QR", boss= 3, designation=3},
{id: 10, name="ST", boss= 1, designation=2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
在上面的数据中,请注意,boss字段引用的是同一个数组,而designation引用的是不同的数组。
我想要什么
我想在表格中显示这些数据:
id | name | boss | designation
---+------+------+------------
1 | AB | SUP | Principle
2 | CD | AB | HOD
3 | EF | AB | HOD
4 | GH | AB | HOD
5 | IJ | CD | Teacher
6 | KL | EF | Teacher
7 | MN | EF | Teacher
8 | OP | MN | Student
9 | QR | EF | Teacher
10 | ST | AB | HOD
我在计划什么
现在我使用javascript显示上面提到的表。现在我正计划使用Angular.js来学习和实现同样的例子。有没有为angularjs内置的东西来做这些事情?如果没有,请告诉我如何使用javascript实现这一点?
您可以使用data.map(...)
以您需要在表中显示的格式进行投影。
例如,你可以做一些类似的事情:
$scope.tableContent = data.map(function(d) { return new {
id: d.id,
name: d.name,
boss: data.filter(function(x) {return x.id == d.boss; })[0],
designation: designations.filter(function(des) { des.id == d.designation; })[0];
});
或者类似的东西。然后,您只需将tableContent绑定到一个ng repeat,并使用angular呈现您想要的HTML。
类似这样的东西:
<table>
<tr ng-repeat='row on tableContent'>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.boss.name}}</td>
<td>{{row.designation.name}}</td>
</tr>
</table>
您可以使用$.grep
函数:
$scope.getDesignation = function (Id) {
return jQuery.grep(designations, function (a) {
return a.Id == Id;
})[0].name;
}
并从html中调用getDesignation
函数。
示例:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.boss }}</td>
<td>{{ getDesignation(item.designation) }} </td>
</tr>
</tbody>
</table>
var data = [{id: 1, name: "AB", designation: 1},
{id: 2, name: "CD", boss: 1, designation: 2},
{id: 3, name: "EF", boss: 1, designation: 2},
{id: 4, name: "GH", boss: 1, designation: 2},
{id: 5, name: "IJ", boss: 2, designation: 3},
{id: 6, name: "KL", boss: 3, designation: 3},
{id: 7, name: "MN", boss: 3, designation: 3},
{id: 8, name: "OP", boss: 7, designation: 4},
{id: 9, name: "QR", boss: 3, designation: 3},
{id: 10, name: "ST", boss: 1, designation: 2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
for (var i = 0; i < data.length; i++) {
var boss = data[i].boss;
var b = eval(i+1);
var bossId = data[i].boss-1;
if(boss){
var bossName = data[bossId].name;
}
var name = data[i].name;
var designationId = data[i].designation;
var designationName = designations[designationId-1].name;
if(!boss){
$("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>SUP</td><td>"+designationName+"</td></tr>");
} else {
$("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>"+bossName+"</td><td>"+designationName+"</td></tr>");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
VIEW
<html ng-app="app">
<div ng-controller="myCtrl as vm">
<div ng-repeat="item in data">
{{item.name}}
<br/> Designation : {{getDesignationById(item.designation).name}}
<br/>
<br/>
</div>
</div>
</html>
控制器
var app = angular.module('app', [])
// controller
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.data = [{
'id': 1,
'name': "AB",
'designation': 1
}, {
'id': 2,
'name': "AC",
'designation': 2
}, {
'id': 3,
'name': "ER",
'designation': 3
}, {
'id': 4,
'name': "TG",
'designation': 4
}]
var designations = [{
'id': 1,
'name': "Principle"
}, {
'id': 2,
'name': "HOD"
}, {
'id': 3,
'name': "Teacher"
}, {
'id': 4,
'name': "Student"
}];
$scope.getDesignationById = function(id) {
return $filter('filter')(designations, { id: id })[0];
}
}]);
JSFIDDLE
普通JS(不需要jQuery)
首先更改数据数组以包含传输的值。
然后填充表格行
var data = [{id: 1, name:"AB", boss= 0, designation:1},
{id: 2, name:"CD", boss: 1, designation:2},
{id: 3, name:"EF", boss: 1, designation:2},
{id: 4, name:"GH", boss: 1, designation:2},
{id: 5, name:"IJ", boss: 2, designation:3},
{id: 6, name:"KL", boss: 3, designation:3},
{id: 7, name:"MN", boss: 3, designation:3},
{id: 8, name:"OP", boss: 7, designation:4},
{id: 9, name:"QR", boss: 3, designation:3},
{id: 10, name:"ST", boss: 1, designation:2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
for(var key in data){
for(var id in designations){
if(designations[id].id == data[key].designation){
data[key].designation = designations[id].name;
break;
}
}
for(var id in data){
if(data[id].id == data[key].boss){
data[key].boss = data[id].name;
break;
}
}
}
var table = new Array();
var row = new Array();
for(var key in data[0]){
row.push(key);
}
table.push(row);
for(var index in data){
row = new Array();
for(var column in data[index]){
row.push(data[index][column]);
}
table.push(row);
}
您可以这样做:
var dataMap = data.reduce((p, c) => {p[c.id] = c.name; return p;}, {});
var designationsMap = designations.reduce((p, c) => {p[c.id] = c.name; return p;}, {});
data.forEach((v) => {
if(v.boss && dataMap[v.boss]){
v.boss = dataMap[v.boss];
}
if(v.designation && designationsMap[v.designation]){
v.designation = designationsMap[v.designation];
}
});
var app = angular.module("app", []);
app.controller("mainController", mainController);
function mainController($scope){
$scope.data = data;
}
以及HTML:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data track by $index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.boss}}</td>
<td>{{item.designation}}</td>
</tr>
</tbody>
</table>
演示
相关文章:
- 将URL字符串${userid}替换为javascript对象中的实际用户id
- 在库(javascript/HTML)中将“name”替换为“id”
- 将 id 中的冒号替换为 :
- 用另一个没有ID的类移除/替换类-仅限Javascript
- Jquery克隆表单值并替换表单字段id
- 在 IE8 之前替换了属性(“id”)
- 在 jquery 中使用类和 ID 将一个图像替换为另一个图像
- 从锚标记中获取元素 ID 并替换 href
- 如何将帖子 ID 替换为网址 slug
- JavaScript 用具有特定 ID 的正则表达式 img 标记替换,但其他属性可以是任何属性
- 将 ID 替换为特定 URL 的元素
- 如果 ID 以前缀开头,则 JQuery 替换 html 元素内容
- 使用lodash替换具有相同id的数组中对象
- 单击链接时替换gdata播放列表提要中的播放列表id
- 如何获取选定的文本id,并用javascript替换保持标签完整的文本
- 如何为没有ID的元素替换类名
- 附加ID而不替换原始ID
- 如何使用注入WKWebView的Javascript替换DIV标记中只有类无id的文本
- jQuery替换/删除没有id或标记的属性
- 如何在jquery中获得移动ID和替换ID排序