用名称替换Id

Question

我所拥有的

我有一些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字段引用的是同一个数组，而指定是引用不同的数组。

我想要的

我想在表格中显示这些数据：

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学习并实现相同的示例。有什么东西可以让安古拉杰做这样的事吗？如果没有，请告诉我如何使用javascript实现这一点？

Answer 1

您可以使用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-重复，并按照您希望的角度呈现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>

Answer 2

您可以使用$.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>

Answer 3

​

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>

​